skip to Main Content

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

3

Answers


  1. 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. 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. 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