<body>
  <h1>Passa il mouse sulle immagini per vedere i filtri</h1>
  <div class="image-container">
    <div class="image-box">
      <img class="blur" src="https://img.freepik.com/foto-gratuito/colpo-del-primo-piano-di-un-pappagallo-ara-con-piume-colorate-su-uno-sfondo-grigio_181624-24916.jpg?t=st=1737047211~exp=1737050811~hmac=0946738a49c8ebe54294f0b214acbf61306a65e7a866fd1246fb4e6d3dac32c0&w=1380" alt="Esempio Blur">
      <h3>Blur</h3>
    </div>
    <div class="image-box">
      <img class="grayscale" src="https://img.freepik.com/foto-gratuito/colpo-del-primo-piano-di-un-pappagallo-ara-con-piume-colorate-su-uno-sfondo-grigio_181624-24916.jpg?t=st=1737047211~exp=1737050811~hmac=0946738a49c8ebe54294f0b214acbf61306a65e7a866fd1246fb4e6d3dac32c0&w=1380" alt="Esempio Scala di Grigi">
      <h3>Grayscale</h3>
    </div>
    <div class="image-box">
      <img class="sepia" src="https://img.freepik.com/foto-gratuito/colpo-del-primo-piano-di-un-pappagallo-ara-con-piume-colorate-su-uno-sfondo-grigio_181624-24916.jpg?t=st=1737047211~exp=1737050811~hmac=0946738a49c8ebe54294f0b214acbf61306a65e7a866fd1246fb4e6d3dac32c0&w=1380" alt="Esempio Seppia">
      <h3>Sepia</h3>
    </div>
  </div>
</body>
 body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: Arial, sans-serif;
    }

    .image-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }

    .image-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .image-box img {
      width: 300px;
      height: auto;
      transition: filter 0.5s ease;
    }

    .blur:hover {
      filter: blur(5px);
    }

    .grayscale:hover {
      filter: grayscale(100%);
    }

    .sepia:hover {
      filter: sepia(80%);
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.