I have created a demo where an image changes color on hover, transitioning from gray to various colors. However, I find that the color change effect is too abrupt and I would like it to be more smooth, with a gradual transition and ease-in/ease-out effects.
<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: 100%;
}
img:hover{
-webkit-filter: none;
filter: none;
}
.grid-item {
width: 80px;
height: 80px ;
margin-bottom: 10px;
overflow:hidden;
}
.grid-item--width2 {
width: 400px;
}
</style>
<div class="grid">
<div class="grid-item">
<img src="https://mapchart.net/img/world-divided-population-map.png">
</div>
<div class="grid-item">
<img src="https://mapchart.net/img/world-divided-population-map.png">
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/masonry/4.2.1/masonry.pkgd.min.js"></script>
<script type="">
$(function(){
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 80,
gutter: 10
});
});
</script>