Image Grayscale and Zoom effect on hover using CSS

Images, graphics and videos are an integral part of web presentation in recent times. Users are always attracted to visual presentations as compared to text contents.

In this article, we are going to create a hover effect on image to make our webpage look more attractive and impressive. We will use “filter” and “transition” CSS property to achieve the same.

Follow this video for complete guidance :

Source Code :

<style type="text/css">
  figure.img-wrap{
    width: 550px;
    overflow: hidden;
    padding: 0;
    border: 1px solid #fff;
    margin: 0;
  }
  .bw{
    width: 100%;
    cursor: pointer;
    filter: grayscale(100%);
    transition: transform 1s;
    object-fit: cover;
  }
  .bw:hover{
    transform: scale(1.1);
    filter: none;
    -webkit-filter: grayscale(0%);
  }
  .d-flex{
    display: flex;
  }
</style>


<div class="d-flex">
  <figure class="img-wrap">
    <img class="bw" src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg">
  </figure>
  <figure class="img-wrap">
    <img class="bw" src="https://free4kwallpapers.com/uploads/wallpaper/summer-nature-wallpaper-1280x720-wallpaper.jpg">
  </figure>
  <figure class="img-wrap">
    <img class="bw" src="https://i.pinimg.com/originals/56/c3/87/56c387cfe9fd5a4ecdcf1b315ac7b67b.jpg">
  </figure>
  <figure class="img-wrap">
    <img class="bw" src="https://cdn.wallpapersafari.com/11/36/zVKWQ9.jpg">
  </figure>
</div>



<div class="d-flex">
  <figure class="img-wrap">
    <img class="bw" src="https://cdn.pixabay.com/photo/2020/03/16/20/05/landscape-4938194_1280.jpg">
  </figure>
  <figure class="img-wrap">
    <img class="bw" src="https://cdn.wallpapersafari.com/5/86/TcSWle.jpg">
  </figure>
  <figure class="img-wrap">
    <img class="bw" src="https://wallpapercave.com/wp/wp2599634.jpg">
  </figure>
  <figure class="img-wrap">
    <img class="bw" src="https://www.hdwallpapers.in/download/beautiful_scenery_best_nature_background_forest_hd_autumn-1280x720.jpg">
  </figure>
</div>