title: how can I make my blurred image into a link (HTML)
body: <p>I made my image blurred when you hover over it but every time I try to make the image clickable where it redirects to a new link, the image disappears on Chrome. How can I fix this?
  This is the code I have right now for my blurred image:</p>
  <pre><code>&lt;div class=&quot;textWithBlurredBg2&quot;&gt;
           &lt;img src=&quot;https://taylorsdigigracelim.files.wordpress.com/2014/04/week-4-practical-ex-1.jpg&quot;&gt; &lt;/a&gt;
              &lt;h2&gt;travel&lt;/h2&gt;
          &lt;/div&gt;
  </code></pre>
  <p><strong>(that's my code in HTML)</strong></p>
  <pre><code>.textWithBlurredBg2 {
      width: 300px;
      height: 200px;
      display: inline-block;
      margin: 4px;
      position: relative;
      transform: translate(370px, 200px);
  }
  .textWithBlurredBg2 img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      transition: .3s;
  }
  .textWithBlurredBg2:hover img{
      filter: blur(2px) brightness(90%);
      box-shadow: 0 0 9px #DA70D6;
  }
  .textWithBlurredBg2 :not(img) {
      position: absolute;
      top: 30%;
      z-index: 1;
      color: #fff;
      text-align: center;
      width: 100%;
  }
  </code></pre>
  <p><strong>(That's my code in CSS)</strong></p>