Overlay image on hover using only css

Question

I'm trying to overlay an image with a smaller image that has the background opacity of the first image when hover, using only css because i'm not able to edit the html.

Here is a sample HTML:

<div class="image">
  <a href="http://www.example.com">
    <img src="/uploads/2016/08/img1.png" class="rggclImgCenter">
  </a>
</div>

Using CSS only, i thought would be something like this:

.image:hover {
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}

But it will only replace the image.

score 2 · Answer 1 · answered Aug 30 '16 at 08:16

You could use the css pseudo element if you wouldn't like to (or cannot) modify the html.

Please be awared you cannot use :before or :after on img element

Here is the CSS:

img { max-width: 300px; } /* the image dimension */

.image a { position: relative; display: inline-block; } /* allow :before element positioning easier */
.image a:hover:before {
  position: absolute;
  top: 30px; left: 40px; /* Where to put the overlay */
  display: inline-block;
  content: ''; /* must have */
  width: 300px; height: 164px; /* size of the element */
  background-image: url('https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg'); /* URL of the image */
  background-size: 300px 164px; /* Resize the image as this dimension */
  opacity: .5; /* Transparent rate */
}

You can try it on https://jsfiddle.net/bq9khtz3/

score 1 · Accepted Answer · edited Aug 30 '16 at 11:09

Did not have the original image so used an image of my own. See if this helps.

You can also refer to this link: https://jsfiddle.net/askptx0y/

.image:hover {
  background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
  background-repeat: no-repeat;
  opacity: 1;
}
img:hover {
  opacity: 0.5;
}

<div class="image">
  <a href="http://www.example.com">
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="rggclImgCenter">
  </a>
</div>

Andrew Sklyarevsky · Answer 3 · 2016-08-30T08:15:10.827

0

Try adding a :before element on :hover.

.image a:hover:before {
   content: '';
   display: block;
   position: absolute;
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}

edited Aug 30 '16 at 08:15

answered Aug 30 '16 at 07:58

Andrew Sklyarevsky

2,095
14
17

1

thanks for your respond @andrew, but it will only replace the image. What i would like to happened is something like this [link](http://i.stack.imgur.com/Wtjqz.png) without the lorem ipsum. Only touching css because i'm not able to edit the html – zen Aug 30 '16 at 08:08
Then you need to add an `:after` selector on `:hover` for your link because an overlay should be a different element to avoid background rule overriding. See this SO question for example http://stackoverflow.com/questions/13233991/combine-after-with-hover . – Andrew Sklyarevsky Aug 30 '16 at 08:13

score 0 · Answer 4 · answered Aug 30 '16 at 08:19

Make image transparency:

.image a:hover image {
   opacity: 0;
 }

Show your background image

.image a:hover {
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
  /* add other properties */
}

score 0 · Answer 5 · answered Aug 30 '16 at 08:22

    .image:hover img {
    -webkit-filter: brightness(40%);
    -moz-filter: brightness(40%);
    -ms-filter: brightness(40%);
    -o-filter: brightness(40%);
}
.image:hover img:after {
   content: '';
   display: block;
   position: absolute;
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}

Overlay image on hover using only css

5 Answers5