Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to on mouse unblur a image with taildwind or reactjs / typescript

Hello i try multiple solution to when my mouse in on a image it’s unblur but i still dont find how i use blur-md to medium blur but when i trop to wrap another librarie inside it’s doesnt work

        <img
        src="/assets/images/wall1.png"
        alt="logo"
        className="hidden xl:block h-screen w-1/2 object-cover bg-no-repeat blur-md"
        
        />

i try with other libraries but none of theses are working

Tags:

3

Answers


  1. 0

    With JavaScript

    const img = document.querySelector('img');
img.addEventListener('mouseenter', () => img.style.filter = "blur(10px)");
img.addEventListener('mouseleave', () => img.style.filter = "");
    <img src="https://picsum.photos/200/300" />

    With CSS

    img.hover-blur:hover {
    filter: blur(10px);
}
    <img class="hover-blur" src="https://picsum.photos/200/300" />
    Login or Signup to reply.
  2. 0

    Try to add "blur-none hover:blur-md"

    <img src="/assets/images/wall1.png" alt="logo" 
className="hidden xl:block h-screen w-1/2 object-cover bg-no-repeat blur-none hover:blur-md" />
    Login or Signup to reply.
  3. 0

    using css

    img{
   filter: blur(10px);
}

img:hover{
   filter: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search