Hover over image using JS

In this example below you will see how to do a Hover over image using JS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Ferencok, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ferencok ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Hover over image using JS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  <p>Move the mouse pointer over this paragraph.</p>

  <div class="row">
    <div class="col s12  center main">
      <h4>Screens</h4>
      <div class="col s3 carousel-main">
        Hello
        <div class="divImg">
        <img class="" src="http://lorempixel.com/200/200" alt="samsung"></div>
      </div>

      <div class="col s3 carousel-main"> Hello
<div class="divImg">
       
        <img class="" src="http://lorempixel.com/200/200 " alt="samsung">
      </div></div>
      <div class="col s3 carousel-main"> Hello
<div class="divImg">
        
        <img class="" src="http://lorempixel.com/200/200 " alt="samsung"></div>
      </div>
      <div class="col s3 carousel-main"> Hello
<div class="divImg">
        
        <img class="" src="http://lorempixel.com/200/200 " alt="samsung"></div>
      </div>
    </div>
  </div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Ferencok/hover-over-image-using-js-mmwBLG */
body{
  width:100%;
  margin: 0;
  padding:0;
  color: black;
  } 
.row{
  margin:0 auto;
  width:80%;
}
.carousel-main{
  float:left;
}

.img1{
      background:red;
      width:300px;
      height:100px;
      transition: ;
      opacity: .5;
   }

.backColor{
  background: black !important;
  opacity: .3;
  cursor:pointer;
  }

img{
  margin-left: 20px;
}

/*Downloaded from https://www.codeseek.co/Ferencok/hover-over-image-using-js-mmwBLG */
$(document).ready(function(){
    $("p").mouseenter(function(){
        $("p").addClass("img1").animate({'height':'auto', "width":"200px", 
  "transition": ".7s"});
    });
    $("p").mouseleave(function(){
        $("p").removeClass("img1");
    });
});

// image hover effect
$(document).ready(function(){
    $(".divImg > img").mouseenter(function(){
        $(".divImg > img").addClass("backColor").animate({
  'transition': '.7s'});
    });
    $(".divImg > img").mouseleave(function(){
        $(".divImg > img").removeClass("backColor");
    });
});

Comments