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>
This question is related to
javascript
css
How about this...
<style type="text/css">
div.frame { background-color: #000; }
img.pic:hover {
opacity: .6;
filter:alpha(opacity=60);
}
</style>
<div class="frame">
<img class="pic" src="path/to/image" />
</div>
Create black png with lets say 50% transparency. Overlay this on mouseover.
I realise this is a little late but you could add the following to your code. This won't work for transparent pngs though, you'd need a cropping mask for that. Which I'm now going to see about.
outerLink {
overflow: hidden;
position: relative;
}
outerLink:hover:after {
background: #000;
content: "";
display: block;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
}
Make the image 100% bright so it is clear. And then on Img hover reduce it to whatever brightness you want.
img {_x000D_
-webkit-transition: all 1s ease;_x000D_
-moz-transition: all 1s ease;_x000D_
-o-transition: all 1s ease;_x000D_
-ms-transition: all 1s ease;_x000D_
transition: all 1s ease;_x000D_
}_x000D_
_x000D_
img:hover {_x000D_
-webkit-filter: brightness(70%);_x000D_
filter: brightness(70%);_x000D_
}<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">That will do it, Hope that helps
Put a black, semitransparent, div on top of it.
Source: Stackoverflow.com