Hover Effects - JavaScript

Practicing hover effects with no jQuery.

<!DOCTYPE html>
<html >
<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/ */
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/ */
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);

This awesome code ( Hover Effects - JavaScript ) is write by Casey, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Casey