Darken An Image With CSS, JavaScript Or Jquery!
Published by Aslam
Assume you have an image in your web page and you want that to get darken when moue enter over that image.
What You will do?- Using Inline Css ans inline Javascript,you can darken an image.
- Also,if you want to do that with a fade effect, you can use Css and it will work in modern browsers,
- To work in all major browsers, you can use jquery.
Here is the 3 ways to darken an image
- With Simple Inline Javascript + Css
- With Only Css.
- With the help of Jquery (It is the best) .
Simplest Effect With Inline CSS and JavaScript
Effect with CSS only (Only works with modern browsers)
<a class="darken" href="http://google.com/" style="background: black; display: inline-block; padding: 0;">
<img alt="Mouse Over and Opacity Will Change with inline CSS and JavaScript" onmouseout="this.style.opacity=1;" onmouseover="this.style.opacity=0.6;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" style="display: block;" width="200" />
</a>
Effect with CSS only (Only works with modern browsers)
<style>
a.darkencss {
display: inline-block;
background: black;
padding: 0;
}
a.darkencss 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.darkencss:hover img {
opacity: 0.7;
}
</style>
<a class="darkencss" href="http://google.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
</a>
Effect with jquery JavaScript.(Works in all commom browsers)
<style>
a.darkenjquery {
display: inline-block;
background: black;
padding: 0;
}
a.darkenjquery img {
display: block;
}
</style>>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<a class="darkenjquery" href="http://google.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
</a>
<script>
$('.darkenjquery').hover(function() {
$(this).find('img').fadeTo(500, 0.5);
}, function() {
$(this).find('img').fadeTo(500, 1);
});
</script>
Comments
Post a Comment