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:


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:


<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.

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:

#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

#two_columnsb > div

So, make use of the efficiency of CSS selectors. :slight_smile:

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.


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. :wink:

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. :slight_smile:

It should work like this:

.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.

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. :stuck_out_tongue:

Any way I can preserve the white border around the image? Now it is overlapped by the hover-effect as well…