Poster-Ej_Absolute

In this example below you will see how to do a Poster-Ej_Absolute with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>Poster-Ej_Absolute</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="poster">
  <img src="https://static.highsnobiety.com/wp-content/uploads/2017/11/06205507/star-wars-last-jedi-international-poster-002.jpg" alt="">
  <p class="caption">
    Star Wars - Last Jedi
  </p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jalm_x/poster-ej_absolute-RjvzMO */
.poster{
  width: 250px;
  position: relative;
}

.poster img{
  width:100%;
}
.caption{
  position: absolute;
  width: 100%;
  height:100%;
  margin: 0;
  background: rgba(0,0,0,.5);
  text-align: center;
  color: white;
  top:-600px; 
  overflow: hidden;
}

.poster:hover .caption{
  top:0;
}

Comments