Menu
My problem..
I have a number of images (inside hyperlinks), and I want each to darken on mouseover (i.e. apply a black mask with high opacity or something), and then go back to normal on mouseout . But I can't figure out the best way to do it.
I've tried..
I don't want..
To reiterate..
I want in image (inslide a hyperlink) to darken on mouseover and then lose its darkness on mouseout.
Thoughts?
UPDATE :
This is my progress from suggestions. Looks fine in IE8, but not in FF3
<html> <body> <a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)"> <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> </a> </body> </html> Thoughts?
-- Lee
ANSWER
I'm going with this (seems to work in IE8 & FF)
<html> <head> <style type="text/css"> .outerLink { background-color:black; display:block; opacity:1; filter:alpha(opacity=100); width:200px; } img.darkableImage { opacity:1; filter:alpha(opacity=100); } </style> </head> <body> <a href="http://www.google.com" class="outerLink"> <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> </a> </body> </html> 
501
If you want to darken the image, use an overlay element with rgba and opacity properties which will darken your image...
If you just want to transition to a darker color on :hover , you don't need linear-gradient . You could simply transition to a darker color. Also, you did not specify the transition-property (i.e, background ).
The brightness() function can be used as a value to apply a linear multiplier to make it appear darker or lighter than the original. To make an image darker, any value below 100% could be used to darken the image by that percentage.
For making it darker, we add linear-gradient(black,black). To sum it up : Use opacity and filter property to darken an image and create cool hover effect with it. Use RGBA colors to make your background image darker.
Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.
Source for the CSS-based solution:
a.darken { display: inline-block; background: black; padding: 0; } a.darken img { display: block; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } a.darken:hover img { opacity: 0.7; } And the image:
<a href="http://google.com" class="darken"> <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200"> </a> Make the image 100% bright so it is clear. And then on Img hover reduce it to whatever brightness you want.
img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } img:hover { -webkit-filter: brightness(70%); filter: brightness(70%); }<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">That will do it, Hope that helps
20
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
