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='.5/jquery.min.js?ver=3.2'></script>
</head>
<body>
<img src=".jpg"/>
</body>
</html>
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./ajax/libs/jquery/1.5/jquery.min.js?ver=3.2'></script>
</head>
<body>
<img src="http://i25.lulzimg./7cd053.jpg"/>
</body>
</html>
- 2 It might be easier to help if you show what you've tried so far? – slapthelownote Commented Aug 23, 2011 at 9:04
2 Answers
Reset to default 4Put 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./animate/
http://api.jquery./hover/
Could also be done with CSS pseudo classes, but then without effects.
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.