Jump to content


Photo

Opacity image hover issue


  • Please log in to reply
1 reply to this topic

#1 dweb

dweb

    Advanced Member

  • Members
  • PipPipPip
  • 102 posts

Posted 20 October 2013 - 06:32 PM

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 by dweb, 20 October 2013 - 06:33 PM.


#2 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 365 posts
  • LocationThe Pleiades
  • Age:23

Posted 21 October 2013 - 03:41 AM

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.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com