Menu
I need an on hover semi-transparent div which causes some text to appear over the top of a thumbnail image? Is it possible to do this without using JavaScript and using just Cascading Style Sheet?
411
To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.
Answer: Use the CSS background-image property You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
To adjust the opacity of an overlay, simply put the mouse cursor (arrow) on the overlay in the Ecamm Live main window, and do a scroll gesture up or down while holding down the shift key on the keyboard.
You can try something like this:
<style type="text/css">
.thumb {position:relative;width:200px;height:20px;}
.thumb:hover .overlay {opacity:0.5;}
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;}
</style>
<div class="thumb">
<div class="overlay"></div>
<img src="image.gif" />
</div>
Ok ok I know this is old but i ran into and have something to add about opacity settings
http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/
give that a look over, I find using rgba when ever possible over opacity procuces a much better result, opacity can work funny in different browsers and cause all manner of asthetic problems... just my 2 cents
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
