Hover Effects - JavaScript

In this example below you will see how to do a Hover Effects - JavaScript with some HTML / CSS and Javascript

Practicing hover effects with no jQuery.

Thumbnail
This awesome code was written by caseymorrisus, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright caseymorrisus ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Hover Effects - JavaScript</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="container">
  <img src="https://i.imgur.com/90v1H1C.jpg">
  <span><p>Hover Text<br></p></span>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/caseymorrisus/hover-effects-javascript-AbCGE */
body {
  font-family: Arial;
}

#container {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
#container img {
  width: 100%;
}
#container span {
  background: #333;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-transition: all 300ms ease-in-out;
  opacity: 0.3;
  animation: none;
  font-weight: 900;
  font-size: 40px;
}
#container span:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
#container span p {
  color: #777;
  text-shadow: 0px 1px #aaa, 0px -1px #111;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}


/*Downloaded from https://www.codeseek.co/caseymorrisus/hover-effects-javascript-AbCGE */
var container = document.getElementById("container");

container.addEventListener('mouseover', function() {
  var el = this.children[1];
  el.style.top = 0;
  el.style.opacity = 1;
}, false);

container.addEventListener('mouseout', function() {
  var el = this.children[1];
  el.style.top = "100%";
  el.style.opacity = 0.3;
}, false);

Comments