Image Hover CSS Effect

Image Hover Effect CSS

---

Girfa : Student Help

Girfa : Student Help

Girfa : Student Help

Girfa : Student Help

<div class="container">

  <img src="girfa.jpg" class="image">

  <div class="overlay">

    <div class="text">Girfa : Student Help</div>

  </div>

</div>

CSS Code

.container {

  position: relative;

  width: 50%;

}

.image {

  display: block;

  width: 100%;

  height: auto;

}

.overlay {

  position: absolute;

  bottom: 0;

  left: 100%;

  right: 0;

  background-color: green;

  overflow: hidden;

  width: 0;

  height: 100%;

  transition: .8s ease;

}

.container:hover .overlay {

  width: 100%;

   left: 0;

}

.text {

  color: white;

  font-size: 20px;

  position: absolute;

  overflow: hidden;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

}

Girfa : Student Help

<div class="container">

  <img src="girfa.jpg" class="image">

  <div class="loverlay">

    <div class="text">Girfa : Student Help</div>

  </div>

</div>

CSS

.loverlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: green;

  overflow: hidden;

  width: 100%;

  height: 0;

  transition: .8s ease;

}

.container:hover .loverlay {

  height: 100%;

 

}

Girfa : Student Helpp

<div class="container">

  <img src="girfa.jpg" class="image">

  <div class="uoverlay">

    <div class="text">Girfa : Student Help</div>

  </div>

</div>

CSS

.uoverlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: green;

  overflow: hidden;

  width: 0;

  height: 100%;

  transition: .8s ease;

}

.container:hover .uoverlay {

  width: 100%;

 

}

Download Source Code

Next Example