Image overlay hover CSS

harry_ord · August 21, 2017

Hello

I'm following the course on w3schools and i stumbled upon this example:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

I'm wondering how can i do the same but with a group of pictures? like one next to another.

I tried adding more images inside the "container" div, but it just change all the pictures inside when i hover on any of them. I'd like the hover to be independant for eac picture, like the text saying "image 1", the next saying "image 2", etc... different overlays for each picture, one next to another.

Any help please?

dsonesuk · August 21, 2017

The images must be within a container, so you apply this feature to a specific image, you won't be able to apply overlay background to image, identify its size, position iwithout this container.

harry_ord · August 21, 2017

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.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;
  background-color: #008CBA;
}


.overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

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

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

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.text2 {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
   <img src="img_avatar.png" alt="Avatar2" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
  <div class="overlay2">
    <div class="tex2t">Hello World2</div>
  </div>
</div>

</body>
</html>

I do this and the 2 images are affected.

Sign In

Image overlay hover CSS

Recommended Posts

harry_ord

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

harry_ord

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity