Jump to content


Opacity image hover issue

  • Please log in to reply
1 reply to this topic

#1 dweb

  • Members
  • PipPipPip
  • Advanced Member
  • 123 posts

Posted 20 October 2013 - 11:32 PM

Hi al


I have the following code;

.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; }
<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?



Edited by dweb, 20 October 2013 - 11:33 PM.

#2 Love2c0de

  • Members
  • PipPipPip
  • Advanced Member
  • 366 posts
  • LocationThe Pleiades
  • Age:23

Posted 21 October 2013 - 08: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:

        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,



0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users