Hover up

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

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

<head>
  <meta charset="UTF-8">
  <title>Hover up</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div>
<img src="https://beemo.com.br/portfolio/img/galeria/beck_thumb.jpg" alt="">
<img class="up" src="https://beemo.com.br/portfolio/img/galeria/waterlove_thumb.jpg" alt="">
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/guilima/hover-up-AarCJ */
div {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  float: left;
}

img {
display: block;
height: auto;
max-width: 100%;
}

div img.up {
  position: absolute;
  top: 100%;
  -webkit-transition: top 300ms;
  -moz-transition: top 300ms;
  -ms-transition: top 300ms;
  -o-transition: top 300ms;
}

div:hover img.up {
  top: 0;
}.

Comments