I'm having trouble with changing the opacity of images on hover. For some reason, only the 6th picture changes opacity when I use the code: img:hover {opacity: 0.4;}. I've also attempted to target each image individually using "#prototype img[src="xxx"]:hover", but it doesn't seem to work either.
Right now, I'm feeling stuck. Any guidance on how to achieve this would be greatly appreciated, as I'm still new to all of this.
Here's the link to 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);
}