How to create Image Hover Overlay Effect (slide, fade)?

---

To create the CSS Image Hover Overlay Effect (slide, fade) follow the steps below:

Demo:

Image Overlay Fade:

Hover over the image to see the effect (fade):

Step1.

Add HTML

<div class="containerTwo">
  <img src="https://lenadesign.org/wp-content/uploads/2021/07/house1.jpg" alt="house" class="image">
  <div class="overlayTwo">
    <div class="text">🏠 :135m² </br>🛏️ :3</br>🛁 :1</br> 🚗 :yes</div>
<div class="read">Read More<i class="arrow-right"></i></div>
  </div>
</div>

Step2.

Add CSS

.containerTwo {
  position: relative;
  width: 320px;
  margin:10px;
}
.image {
  display: block;
  width: 320px;
  height: auto;
}
.overlayTwo {
  position: absolute; 
  bottom: 0; 
  background-color: rgba(2, 48, 71, .6);
  width: 320px;
  transition: .6s ease;
  opacity:0;
  padding-bottom: 240px;
}
.containerTwo:hover .overlayTwo{
  opacity:1;
}
.text {
  color: white;
  font-size: 17px;
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.read {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border: 3px solid white;
  padding:10px;
  transition: .3s;
  font-weight: bold;
}

.read:hover {
  color: #023047;
  background-color: white;
  cursor: pointer;
}

.read:hover .arrow-right {
  border: solid #023047;
  border-width: 0 3px 3px 0;
}

.arrow-right {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  transition: .3s;
}

Image Overlay Slide:

Hover over the image to see the effect (slide-in – top):

Step1.

Add HTML

<div class="containerThree">
  <img src="https://lenadesign.org/wp-content/uploads/2021/07/house1.jpg" alt="house" class="image">
  <div class="overlayThree">
    <div class="text">🏠 :135m² </br>🛏️ :3</br>🛁 :1</br> 🚗 :yes</div>
<div class="read">Read More<i class="arrow-right"></i></div>
  </div>
</div>

Step2.

Add CSS

.containerThree {
  position: relative;
  width: 320px;
  margin:10px;
}
.image {
  display: block;
  width: 320px;
  height: auto;
}
.overlayThree {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #023047;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .4s ease;
}
.containerThree:hover .overlayThree {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 17px;
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.read {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border: 3px solid white;
  padding:10px;
  transition: .3s;
  font-weight: bold;
}

.read:hover {
  color: #023047;
  background-color: white;
  cursor: pointer;
}

.read:hover .arrow-right {
  border: solid #023047;
  border-width: 0 3px 3px 0;
}

.arrow-right {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  transition: .3s;
}

Hover over the image to see the effect (slide-in – right):

Step1.

Add HTML

<div class="containerOne">
  <img src="https://lenadesign.org/wp-content/uploads/2021/07/house1.jpg" alt="house" class="image">
  <div class="overlayOne">
    <div class="text">🏠 :135m² </br>🛏️ :3</br>🛁 :1</br> 🚗 :yes</div>
<div class="read">Read More<i class="arrow-right"></i></div>
  </div>
</div>

Step2.

Add CSS

.containerOne {
  position: relative;
  width: 320px;
  margin:10px;
}
.image {
  display: block;
  width: 320px;
  height: auto;
}
.overlayOne {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #023047;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .4s ease;
}
.containerOne:hover .overlayOne {
  width: 160px;
  left: 160px;
}
.text {
  color: white;
  font-size: 17px;
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.read {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border: 3px solid white;
  padding:10px;
  transition: .3s;
  font-weight: bold;
}

.read:hover {
  color: #023047;
  background-color: white;
  cursor: pointer;
}

.read:hover .arrow-right {
  border: solid #023047;
  border-width: 0 3px 3px 0;
}

.arrow-right {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  transition: .3s;
}

Enjoy coding!

Read also:

CSS Image Zoom on Hover

CSS & JavaScript Image Magnifier Glass

CSS Conic-Gradient