Jump to content

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


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...