How to have another picture with text be shown when when hovering over a image?

[Christ-grace]

Hi 🙂 

On https://iatl.co the Team is presented. I would love to implement something like this also. When hovering over a image, another picture with text is shown. 

How is this called in tech language? Or can you find me a correspondent article on www.w3schools.com or another trustful source so I can implement it as html-code?

Happy about clear and competent help.

Greetings, Klaus

Edited June 7, 2020 by Christ-grace

[shaili_shah]

Its called Overlay images.

<div class="container">
  <img src=""  class="image">
  <div class="overlay">
    <div class="text">Hello</div>
  </div>
</div>

 

First set container and image block 

.container {
  position: relative;
  width: 50%;
}

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

Now when you hover image then

.container:hover .overlay {
  height: 100%;
}

after hover display overlay structure

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

and last is to set text class

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

I hope you find the answer you were looking for.

Thanks!

[dsonesuk]

And the important part, you know the part where the original image swaps to another different image with text?