CODEWITHSUNDEEP
htmlcsshover
Göran Kempe
Göran Kempe

Reputation: 97

How do I make my images in my div change opacity on hover?

I'm trying to make each picture change opacity on hover, but I can't make it work.

When I'm using: img:hover {opacity: 0.4;} only the 6th picture changes opacity. I've also tried using "#prototype img[src="xxx"]:hover" trying to target every picture individually, but that doesn't seem to work either.

Right now I'm pretty much stuck. How do I make this work? I'm still new to all this, so every little bit of help is appreciated.

Here's the fiddle. http://jsfiddle.net/jzaeehhq/

HTML:

<div id="prototype" onclick="expand();">
    <img style="height: 100px; width: 100px; position: absolute;" src="http://i.imgur.com/MEbxzVL.png" alt="menu1">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/TMZ4hXu.png" alt="menu2">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/VeJ6BR2.png" alt="menu3">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/aIYy0qr.png" alt="menu4">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/QO0Z8TE.png" alt="menu5">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/uGopItw.png" alt="menu6">
</div>

And the CSS:

body {
  background-color: #F0F0F0;
  background-repeat: no-repeat;
  background-size: cover;
}

#prototype  { 
  position: absolute;
  top: 45%;
  left: 47.5%;
  background-color: rgba(255,0,0,0.5);
}

Upvotes: 0

Views: 161

Answers (4)

Peter Skourup
Peter Skourup

Reputation: 11

Here is one way to do this:

:hover #prototype {
    opacity:0.4;
}

Note how the line starts with :hover -- no selector (ie class or id or tag) was used before it.

JSFiddle: http://jsfiddle.net/jzaeehhq/2/

Upvotes: 0

Cătălin Matei
Cătălin Matei

Reputation: 151

As Lee said, you only hover last image.

Try this with map element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map.

Upvotes: 0

Maxim Mazurok
Maxim Mazurok

Reputation: 4138

It is because your images all are 300X300px, so they are overlapping each other:

overlap

But you should reduce size of all iamges and place them without overlapping:

no overlap

Hope you get the idea :)

Upvotes: 1

Max Seifert
Max Seifert

Reputation: 19

   div img:hover {
 opacity:0.1;
}

I suggest you use class-tags though let me know if it works :)

Upvotes: 0

Related Questions