Overlay png image and darken image on hover
Question
How do i make the image darken, then overlay a png image like here ?
here's my current code:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Effect</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=3.2'></script>
</head>
<body>
<img src="http://i25.lulzimg.com/7cd053.jpg"/>
</body>
</html>
2 answers
solution1
4 2011-08-23 09:07:32
Put a black background-color on the image container and fade out the image on hover.
The jquery (for example) would look something like this:
$('.fadable-image').each(function(){
$(this).hover(function(){
$(this).animate({opacity: 0.5}, 250, 'swing');
},function(){
$(this).animate({opacity: 1}, 250, 'swing');
});
});
http://api.jquery.com/animate/
Could also be done with CSS pseudo classes, but then without effects.
solution2
2 ACCPTED 2011-08-23 09:13:27
I've taken the code straight out of the site for you to see how it's done. The + image doesn't show up as the path to the img file is unknown to me.
See here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.