'How to do this image hover effect in CSS : dark overlay + image grow + title on it?

Does anyone knows how to do in css the following effect on hover on a image (dark overlay + image grow + name which appears on it) : https://drive.google.com/file/d/1zP5gRnI7BZIO-ajHSrZg2LnNhZCJ_f5F/view?usp=sharing

Thank you very much :)

csshoveroverlay


Solution 1:[1]

My practice is to create wrapper element around img tag

<div class="img-container">
    <img src="./images/img.png" alt="foo" />
</div>

and then applying styles like

.img-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.img-container:hover .overlay {
    opacity: 1;
}
.img-container:hover img{
    transform: scale(1.2);
}
.img-container::before {
    content: "Hello";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 25px;
    color: #fff;
    text-align: center;
    background-color: rgba(175, 175, 175, 0.425);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
img {
    transition: transform 0.3s;
}

Hope this help ;)

Solution 2:[2]

You can either create a parent element appending the image element inside or use the ::after selector:

img {
  position: relative;
}
img:hover {
  /* grow image here */
}
img:hover::after {
  contents: "FLUO";
  display: flex;
  background-color: rgba(0, 0, 0, 50%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
}

Or use the background-image property to grow your image:

img {
  background-image: url("/path/to/your/image.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
img:hover {
  background-size: 120%;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kasimali Dhuka
Solution 2

Related Questions