Jump to content

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


Christ-grace
 Share

Recommended Posts

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 by Christ-grace
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...