How to do a blur img when passing the mouse over it?

Asked

Viewed 67 times

-4

I’m having difficulty with this element of the site I’m trying to set up for school, if it is not possible for a site to perform this function please let me know.

1 answer

2

Can be seen here,

Update: Thank you Diego Schmidt for the remark, as stated in microsoft documentation.

Observing: Since Windows Internet Explorer 9, this feature has been deprecated. From Internet Explorer 10, this feature has been removed and should no longer be used.

    img {
      transition: .3s all;
      border-radius: 3px;
    }
    .bg:hover img {
      -webkit-filter: blur(2px);
      filter: blur(2px);
    }
    <div class="container">
      <div class="bg">
        <img src="https://unsplash.it/400/200" alt="">
      </div>
    </div>

  • 1

    Just one note, filter function does not work in IE.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.