ll55 ll55 - 7 days ago 5
CSS Question

'Hover image display image' CSS is not working properly

I searched around the Internet and found this: How to display image over image on hover with css.

I tried the code of this image in jsfiddle and blog article using Chrome and Firefox.

None of them shows result like this image.

What is not correct in my code? Thanks.



a {
position: relative;
display: inline-block;
}

a:hover:before {
content: '';
display: block;
background-image:url('http://i.imgur.com/fGAbTOj.png');
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}

<a href="#"><img src="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_80b965d66b13d6eb5e1468151a371e12fe159663.600x338.jpg" /></a>




Answer

Use background-size property, as you are setting a background-image property to a:before element and the size of the background image is 256x256. But you've defined the width & height of the a:before element to 50px, so the size of the background image should also be 50px.

Just use:

a:hover:before {
  background-size: 50px; /* as you have 'width' and 'height' defined as 50px each */
}

Have a look at the snippet below:

a {
  position: relative;
  display: inline-block;
}

a:hover:before {
  content: '';
  display: block;
  background-image:url('http://i.imgur.com/fGAbTOj.png');
  width: 50px;
  height: 50px;
  background-size: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
<a href="#"><img src="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_80b965d66b13d6eb5e1468151a371e12fe159663.600x338.jpg" /></a>

Hope this helps!

Comments