Question 252429 in Html Question posted in
Some basic documentation can be found here.

Html – How can I create image overlay over an image hover effect in CSS

I want to create similar effect as shown on the gif below. It should support image and image overlay of different dimensions.

image hover effect

I have successfully created beforementioned effect, however the image overlay did not cover the container when it had different dimension from the image.

.container {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="container">
  <img src="https://cozytux.com/wp-content/uploads/2014/07/placehold.it-500x750.gif" alt="Avatar" class="image">
  <div class="overlay">
    <img src="https://i.pinimg.com/originals/03/8b/b8/038bb804bd1611a46e4b1bafc4c6bca3.jpg">
  </div>
</div>

<div class="container">
  <img src="https://www.kingsporttn.gov/wp-content/uploads/2021/09/500x500.png" alt="Avatar" class="image">
  <div class="overlay">
    <img src="https://driverslicenserestorers.com/wp-content/uploads/placeholder-500x500.gif">
  </div>
</div>
Tags:

2

Answers


  1. 0

    If both image have the same size, and the size known, you may use a single img tag and the box-sizing propertie. This option will aloow you to use both image in your tag. The one to show at first in the src attribute and the other one as a background.
    Below a snippet to show the idea, hover the image

    img {
  box-sizing:border-box;
  width:500px;
  height:280px;
  background:url(https://picsum.photos/id/30/500/280);
  transition:0.25s
}
img:hover {
  padding:140px 250px;/* all paddings equals the size of the image itself */
}
    <img src="https://picsum.photos/id/63/500/280">

    You can even add a transition and play with the padding value to decide from which side to hide/show the other image.

    here is a few more examples:

    img {
  box-sizing:border-box;
  width:500px;
  height:280px;
  background:url(https://picsum.photos/id/30/500/280);
  transition:0.25s
}
img:hover {
  padding:140px 250px;
}
img:nth-child(2):hover {
  padding:140px 0;
}
img:nth-child(3):hover {
  padding:0 250px ;
 }
img:nth-child(4):hover {
  padding:0 500px 0 0;
 }
img:nth-child(5):hover {
  padding:0 0 0 500px;
 }
img:nth-child(6):hover {
  padding: 280px 0 0;
 }
img:nth-child(7):hover {
  padding:0 0 280px 0;
 } 
img:nth-child(8):hover {
  padding: 280px 500px 0 0;
 }
img:nth-child(9):hover {
  padding: 0 0 280px 500px;
 }

img:nth-child(10):hover {
  padding:0  500px  280px 0;
 }
img:nth-child(11):hover {
  padding:  280px 0 0  500px;
 }
    <img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">
<img src="https://picsum.photos/id/63/500/280">

    Here is an example using CSS var() in case that each duo of image are of different sizes. Css var() will avoid to rewrite a rule for each case:
    example below:

    img {
  box-sizing: border-box;
  width: var(--width);
  height: var(--height);
  background: url(https://picsum.photos/id/30/500/280);
  transition: 0.25s
}

img:hover {
  padding: calc(var(--height) / 2) calc(var(--width) / 2);
}


/* below other possible slide out */




/* each of these rule are for a different effect , not because of different sizes */
img:nth-child(2):hover {
  padding: calc(var(--height) / 2) 0;
}

img:nth-child(3):hover {
  padding: 0 calc(var(--width) / 2);
}

img:nth-child(4):hover {
  padding: 0 var(--width) 0 0;
}

img:nth-child(5):hover {
  padding: 0 0 0 var(--width);
}

img:nth-child(6):hover {
  padding: var(--height) 0 0;
}

img:nth-child(7):hover {
  padding: 0 0 var(--height) 0;
}

img:nth-child(8):hover {
  padding: var(--height) var(--width) 0 0;
}

img:nth-child(9):hover {
  padding: 0 0 var(--height) var(--width);
}

img:nth-child(10):hover {
  padding: 0 var(--width) var(--height) 0;
}

img:nth-child(11):hover {
  padding: var(--height) 0 0 var(--width);
}
    <img src="https://picsum.photos/id/63/500/280" style="--width:500px;--height:280px">
<img src="https://picsum.photos/id/63/400/280" style="--width:400px;--height:280px">
<img src="https://picsum.photos/id/63/200/180" style="--width:200px;--height:180px">
<img src="https://picsum.photos/id/63/500/180" style="--width:500px;--height:180px">
<img src="https://picsum.photos/id/63/50/80" style="--width:50px;--height:80px">
<img src="https://picsum.photos/id/63/300/300" style="--width:300px;--height:300px">
<img src="https://picsum.photos/id/63/500/280" style="--width:500px;--height:280px">
<img src="https://picsum.photos/id/63/450/320" style="--width:450px;--height:320px">
<img src="https://picsum.photos/id/63/200/200" style="--width:200px;--height:200px">
<img src="https://picsum.photos/id/63/300/300" style="--width:300px;--height:300px">
<img src="https://picsum.photos/id/63/200/100" style="--width:200px;--height:100px">
<img src="https://picsum.photos/id/63/500/280" style="--width:500px;--height:280px">

    NOTE if both images are of different sizes or ratio, you have background-size and object-fit to resize or clamp them. Give us some examples of pairs of different sizes/ratio to show you some ways/ideas.

    Login or Signup to reply.
  2. 0 
    .container img {
  height: 100%;
  object-fit: cover;
}

    You need to fit the image. I’ll recommend to have same size for both images.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search