Categories
CSS HTML Web development

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

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

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

Demo:

*to see the CSS Image Overlay Effect on the website click here.

Image Overlay Fade:

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

house
🏠 :135m²
🛏️ :3
🛁 :1
🚗 :yes
Read More

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):

house
🏠 :135m²
🛏️ :3
🛁 :1
🚗 :yes
Read More

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):

house
🏠 :135m²
🛏️ :3
🛁 :1
🚗 :yes
Read More

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!