how to make a hover for an image tag

Question

I have a few pictures that that works as a link and I want to give hover effect to them, so in hover a play button appear over them. To do so, I made a class and gives a background img for the hover but it does not work.

.img:hover {
background:url(http://i40.tinypic.com/i3s4dc.png);
}

Here is what I have done: http://jsfiddle.net/nkEpd/

Solution 1

Tried to solve it with no js and no extra markup. Here's my solution adding a pseudo-element to the anchor tag so that when it's hovered the pseudo-element background shows up. You just need to adapt its height to your "play" button's png height so that it gets proper dimensions.

http://jsfiddle.net/gleezer/jmXdh/1/

The HTML stays the same as in your fiddle, no extra elements, the css is like so:

a{
position: relative;
}

a:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
height: 100px;
position: absolute;
left: 0;
}

Solution 2

You cannot add a background-image to an image tag, as it would be invisible since there is already an image overlaying your background.

What you want to be doing is adding a second div on top of your image which would on hover display the background image.

The key would be to add the html like such:

<a href="/">
    <div class="container">
        <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
        <div class="overlay"></div>    
    </div>    
</a>

the css:

.container{
    position:relative;
    width:184px;
    height:104px;
}
.img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;   
    z-index:100;
}

.overlay:hover{
     background:url(http://i40.tinypic.com/i3s4dc.png);
 }

Fiddle here: http://jsfiddle.net/nkEpd/13/

Solution 3

I got a method as well:

http://jsfiddle.net/nkEpd/28/

HTML

<a href="/" class="gallerypic">
  <img src="http://i42.tinypic.com/2v9zuc1.jpg" class="pic" />
  <span class="zoom-icon"><img src="http://i40.tinypic.com/i3s4dc.png"></span>
</a>

CSS

a.gallerypic{
  position:relative;
  display:block;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:0%;
  top:15%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

Solution 4

try this:

a{
display:block;
    width:184px;
    height: 104px;


}
a:hover {
    background:url(http://h.hiphotos.baidu.com/album/w%3D310%3Bq%3D75/sign=4e5a4bd9b219ebc4c0787098b21dbec1/adaf2edda3cc7cd9ba7b40653801213fb80e9133.jpg);
  background-size: 100%;

}

a:hover .img {
    display: none;
}

Please view the demo.

Solution 5

You can change the image on hover by using

img:hover{content:url("hoverimg.jpg");}

your other option is to have a blanket over the image, and apply a background-image to it on hover. The blanket will need to be absolutely positioned to cover the underlying image.

#blanket{position:absolute;top:0;bottom:0;left:0;right:0;}
#blanket:hover{background-image:url('hoverimg.jpg');}

here's an update of your fiddle http://jsfiddle.net/nkEpd/30/

View more solutions

Comments

[Frederik.L]

+1, But I'd specify that hover is better supported on anchors in older browsers so it may be a safe practice to handle rollovers on anchors only (ie: a display:block; formatted anchor)

[Alex Jj]

Thank you, your solution is the simplest one.