SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Make CCS3 image hover responsive

    Hi all,

    On a site I'm designing I would like the images to display a CSS3 opacity effect on hover. After lots of trying, I've found exactly what I'm looking for, but the solution does not seem to work for the responsive design I use for my site.

    This is the css:

    Code CSS:
    span.rollover {
        opacity: 1;
        -o-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -webkit-transition: -webkit-transform 1s;
        background:url(/gui/icon_magnify.png) center center no-repeat #000;
        cursor: pointer;
        width: 600px;
        height: 200px;
        position: absolute;
        z-index: 5;
        opacity: 0;
    }
     
    span.rollover:hover {
        opacity: .7;
        -o-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -webkit-transition: -webkit-transform 1s;
        -webkit-box-shadow: 0px 0px 4px #000;
        -moz-box-shadow: 0px 0px 4px #000;
        box-shadow: 0px 0px 4px #000;
    }

    This is applied to this piece of HTML:

    Code HTML4Strict:
    <div id="two_columnsb_item">
        <a href="link.php"><span class="rollover" ></span><img src"#"></a> 
        <div class="textblock">
            <h3><a href="link.php">Title</a></h3>
            <div class="article_info">gepubliceerd op date in category</div>
        </div>   
        </div>

    The rollover span works perfectly on hover, but is set to 600 x 200 pixels, and I would want it to be 100% for both height and width. When I change the CSS, the effect starts in the upper left corner of my image and stretches across the rest of the page in stead of only the image.

    Any ideas on how to adapt this code? Thanks in advance for the help.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ThaVincy View Post
    I've found exactly what I'm looking for
    Nah, that's not what you want. A much better option is to use rgba colors, and use the :before (or :after) pseudo class on the <a> itself. E.g. remove the span and add this to your CSS instead:

    Code:
    #two_columnsb_item > a {
      position: relative; 
      display: block;
    }
    
    #two_columnsb_item > a:hover:before {
      content: ""; 
      background: rgba(0,0,0,0.7) url(http://stefverbeeckbe.webhosting.be/gui/icon_magnify.png) 50% 50% no-repeat;
      position: absolute; 
      width: 100%; 
      height: 100%;
    }
    HOWEVER, note one thing: you are using the same ID multiple times, which is not allowed in CSS. (You will only get away with it if the browser is kind to you.) So change the #two_columnsb_item IDs to classes instead, or better still, remove the IDs and just target those divs with

    Code:
    #two_columnsb > div
    So, make use of the efficiency of CSS selectors.

  3. #3
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your input, looks like a great solution.

    However, the solution didn't work, as it refered to two_columns_item (which is in fact a column div with a linked image, a H3 and text inside of it). I tried adapting it to the actual image, but there is no result on hover.

    Code CSS:
    div#two_columnsb{
    width: 104%;
    overflow: hidden;
    margin-bottom: 30px;
    margin-left: -4%;
    }
     
        .two_columnsb_item{
        width: 46%;
        float: left;
        margin-left: 4%;
        min-height: 315px;
        max-height: 340px;
        }
     
        .two_columnsb_item img{
        max-width: 100%;
        height: auto;
        margin-bottom: 15px;
        border: 10px solid #ffffff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }
     
        .two_columnsb_item a > img{
        position: relative; 
        display: block;
        }
     
        .two_columnsb_item a > img:hover:before{
        content: ""; 
         background: rgba(0,0,0,0.7) url(/gui/icon_magnify.png) 50% 50% no-repeat;
         position: absolute; 
         width: 100%; 
         height: 100%;
        }

    PS: I've changed the id's to classes. I've been doing it right for years, don't know what came over me this time.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    it refered to two_columns_item (which is in fact a column div with a linked image, a H3 and text inside of it)
    None of which is a problem, though.

    It should work like this:

    Code:
    .two_columnsb_item > a{
      position: relative; 
      display: block;
      border-bottom: none !important;
    }
    	
    .two_columnsb_item a > img{
      display: block;
    }
    	
    .two_columnsb_item > a:hover:before{
      content: ""; 
      background: rgba(0,0,0,0.7) url(/gui/icon_magnify.png) 50% 50% no-repeat;
      position: absolute; 
      width: 100%; 
      height: 100%;
      z-index: 4;
    }
    I've tested that code and it works fine. I removed the bottom border on that a with !important just for convenience, but there are better ways to do it.

  5. #5
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Allright! Works just fine now. Thanks for the help, I'm afraid the semantics of it all still confuse me as we go from ".two_columnsb_item a > img" to ".two_columnsb_item > a:hover:before"; looked like it should have been ".two_columnsb_item a > img:hover:before" to be consistent or something.

    Any way I can preserve the white border around the image? Now it is overlapped by the hover-effect as well...
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •