Pages

▼

Sunday, 19 February 2017

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%;
 

}


at

No comments:

Post a Comment