title: I want to add a circular ripple hover effect on image
body: <p>I want to add a ripple effect animation when hovering over an image. I have a link which he uses ripple effect on button by using JavaScript which i have no idea how it work but i want to use the same method over an image on my code.
  <a href="https://codepen.io/ViktorKorolyuk/pen/GYGwpv" rel="nofollow noreferrer">https://codepen.io/ViktorKorolyuk/pen/GYGwpv</a></p>
  
  <p>Above Link shows the ripple effect on button and below is my  code with blur effect with no animation at all.So I just want to add a ripple effect using the same method but on image</p>
  
  <pre><code>&lt;html&gt;
  &lt;div class="row"&gt;
  &lt;div class="column"&gt;
  
      &lt;div class="div-with-image-and-text"&gt;
      &lt;div class="row"&gt;
      &lt;div class="column half"&gt;
  
         &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt;
        &lt;/div&gt;
      &lt;div class="column half"&gt;
  
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt;
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt;
        &lt;/div&gt;&lt;/div&gt;
  
        &lt;div class="text"&gt;&lt;a href="https://www.w3schools.com/w3images/wedding.jpg"style="text- 
        decoration:none"&gt;&lt;h1 style="color:white;"&gt;Architecture&lt;/h1&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="div-with-image-and-text"&gt;
        &lt;div class="row"&gt;
         &lt;div class="column half"&gt;
  
         &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt;
         &lt;/div&gt;
        &lt;div class="column half"&gt;
  
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt;
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt;
        &lt;/div&gt;&lt;/div&gt;
  
        &lt;div class="text"&gt;&lt;a href="https://www.w3schools.com/w3images/wedding.jpg"style="text- 
        decoration:none"&gt;&lt;h1 style="color:white;"&gt;Architecture&lt;/h1&gt;&lt;/a&gt;&lt;/div&gt;
       &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--Second container--&gt;
  
       &lt;div class="column"&gt;
  
       &lt;div class="div-with-image-and-text"&gt;
       &lt;div class="row"&gt;
       &lt;div class="column half"&gt;
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt;
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt; 
     &lt;/div&gt;
      &lt;div class="column half"&gt;
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt; 
       &lt;/div&gt;&lt;/div&gt;
  
        &lt;div class="text"&gt;&lt;a href="https://www.w3schools.com/w3images/wedding.jpg"style="text- 
    decoration:none"&gt;&lt;h1 style="color:white;"&gt;Landscape&lt;/h1&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  
   &lt;div class="div-with-image-and-text"&gt;
      &lt;div class="row"&gt;
      &lt;div class="column half"&gt;
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt;
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt; 
      &lt;/div&gt;
      &lt;div class="column half"&gt;
        &lt;img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%"&gt; 
       &lt;/div&gt;&lt;/div&gt;
  
        &lt;div class="text"&gt;&lt;a href="https://www.w3schools.com/w3images/wedding.jpg"style="text- 
       decoration:none"&gt;&lt;h1 style="color:white;"&gt;Landscape&lt;/h1&gt;&lt;/a&gt;&lt;/div&gt;
       &lt;/div&gt;
       &lt;/html&gt;
  
       &lt;style&gt;
       * {
       box-sizing: border-box;
         }
  
       body {
       margin: 0;
       font-family: Arial;
        }
  
       .header {
       text-align: center;
       padding: 32px;
        }
  
      .row {
       display: -ms-flexbox;
       display: flex;
       -ms-flex-wrap: wrap;
       flex-wrap: wrap;
       padding: 0 4px;
        }
  
       .column {
       -ms-flex: 25%; /* IE10 */
        flex: 25%;
        max-width: 50%;
       padding: 0 4px;
       }
  
       .column.half {
      -ms-flex: 50%; /* IE10 */
       flex: 50%;
       max-width: 50%;
       padding: 0 4px;
        }
  
        .column img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
        }
  
         @media screen and (max-width: 800px) {
        .column {
         -ms-flex: 50%;
         flex: 50%;
          max-width: 50%;
             }
          }
  
         @media screen and (max-width: 600px) {
        .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
           }
         }
  
         .div-with-image-and-text{
         position: relative;
           }
         .div-with-image-and-text .text {
         display:none;
          }
  
         .div-with-image-and-text:hover img{
           filter: blur(3px) brightness(40%);
           opacity: 0.5;
           transform: scale(0.98);
           box-shadow: none;
             }
            .div-with-image-and-text:hover .text{
              display: block;
              position: absolute;
                top: 50%;left: 50%;
              transform:translate(-50%, -50%);
             text-align:center;
              font-family: 'Muli';
              color:white;
              font-size: 30px;
              text-shadow:0 0 10px gray;
                }
  </code></pre>