Black image fade over image

Question

I have an image on my home page (or index.html) and I want to be able to hover over the image then a black image fades on with a low opacity.

Example: http://wethepeoplebmx.de/hardgoods - if you go to hover over one of the images (or products), you can see the fade sort of thing I am trying to acomplish. I am fairly new at HTML and CSS, along with scripts and stuff like that. I'm assuming it's something to do with CSS, eg, hover, etc.

Thanks in advance

Something more than onhover events and a mostly transparent (~20% perhaps opacity)? — Austin T French, Apr 14 '15 at 13:14
It would be pointless showing code because I haven't added one image over the other, I'm not too sure how to do it, that's why I asked the question; could you give me some code on how to do this? — Josh Murray, Apr 14 '15 at 13:17
You can use jQuery(".class").hover(...). https://api.jquery.com/hover/ — panagdu, Apr 14 '15 at 13:17

score 1 · Answer 1 · answered Apr 14 '15 at 13:39

You can do this with CSS3 animations and :hover.

.wrap {
  width: 100px;
  height: 100px;
  position: relative;
}
.effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: none;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  /* ...and now for the proper property */
  transition: .5s;
}
.effect:hover {
  background: rgba(0, 0, 0, 0.4);
}

<div class="wrap">
  <img src="http://placehold.it/100x100">
  <div class="effect"></div>
</div>

Mukul Kant · Answer 2 · 2015-04-14T13:37:25.410

0

I think you want something like this -

.wrap{position:relative;height: 100px;width: 120px;}
    .wrap img{width: 100%;;height: 100%;}
    .effect{background: rgba(0, 0, 0, .5);;position: absolute;height: 100%;width: 100%;;top:0;display: none;}
    .wrap:hover .effect{display: block;opacity:.4}

<div class="wrap">
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQiWGXo4U6CCvNItlDYFgEQz4d3T-YjLj13nqUZ-crpAr3qMPx-">
        <div class="effect">
            text
        </div>
    </div>

edited Apr 14 '15 at 13:37

answered Apr 14 '15 at 13:21

Mukul Kant

7,074
5
38
53

Yes, yes! But instead of the black coming on, is it possible you could teach me how to make it fade? – Josh Murray Apr 14 '15 at 13:23
Do you want to fade image or black color? – Mukul Kant Apr 14 '15 at 13:27
@JoshMurray Check the duplicate url I posted: http://stackoverflow.com/questions/21145621/css-transition-opacity-fade-background – Bram Apr 14 '15 at 13:27
@BramDriesen i have, but i will have to figure out how to fade text on too – Josh Murray Apr 14 '15 at 13:35

Black image fade over image

2 Answers2