Opacity image hover issue

[dweb]

Hi al

 

I have the following code;

<style>
.mybox { margin-left:50px; margin-top:50px; position:relative }
.myboxtitle { position:fixed; margin-top:-120px; margin-left:20px; background-color:#CCC; padding:20px }
.mybox img:hover { opacity:0.1; }
</style>
<div class="mybox"><img src="file1.jpg" width="300" /><a><h1 class="myboxtitle">Image 001</h1></a></div>
<div class="mybox"><img src="file2.jpg" width="300" /><a><h1 class="myboxtitle">Image 002</h1></a></div>

which works well.

 

the problem is when i hover over the div (myboxtitle) the image opacity is lost

 

how can i retain the image opacity when hovering over the div (myboxtitle), but i don't want any opacity applied to the div, just the image

 

can anyone help me?

 

thanks

Edited October 20, 2013 by dweb

[Love2c0de]

Good morning,

 

It seems using rgba() instead of opacity allows you to decrease the opacity of an element while retaining the other elements opacity value.

 

Try this:

 

.mybox
{ 
        background: rgba(255,255,255, 0.5);
}
 
//background: rgba(red, green, blue, alpha) - alpha = opacity.

 

My values of 255,255,255 assumes the background colour of the .myBox div id white.

 

Change them to suit.

 

Hope this helps.

 

Kind regards,

 

cL.