Loading
how to change image in hover effect if i am hover the image?
  • Priyanka Jain

    Priyanka JainPosted Jul 3, 2019, 7:01 AM

    You can use simple css to change you image on hover
    Refer below example
    1.   
    2. "en">  
    3.   
    4. Hover on Image  
    5. "text/css">  
    6.     .card {  
    7.         width: 150px;  
    8.         height: 200px;  
    9.         background: url("card-back.jpg") no-repeat;  
    10.         margin: 50px;  
    11.     }  
    12.     .card:hover {  
    13.         background: url("card-front.jpg") no-repeat;  
    14.     }  
    15.   
    16.   
    17.   
    18.     class="card">
      
  •   
  •         
    •  
  • Bidyasagar Mishra

    Bidyasagar MishraPosted Jul 3, 2019, 12:18 AM

    use the following simple code to change background image when u  hover the Image.
     
     
    1. <html>  
    2. <head>  
    3. <style>  
    4. style>  
    5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">script>  
    6. <script>  
    7. $(document).ready(function(){  
    8.   $(".image").hover(function(){  
    9.     $(this).attr('src','https://jpeg.org/images/jpeg-home.jpg');  
    10.     }, function(){  
    11.     $(this).attr('src','https://jpeg.org/images/jpegsystems-home.jpg');  
    12.   });  
    13. });  
    14. script>  
    15. head>  
    16. <body>  
    17. <img class="image" src="https://jpeg.org/images/jpegsystems-home.jpg">img>  
    18. body>  
    19. html>  
     
  • Sivakumar Koneti

    Sivakumar KonetiPosted Jul 2, 2019, 11:51 PM

    Hello dear read once this link 
     
    https://www.w3schools.com/howto/howto_css_image_overlay.asp