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

Its called Overlay images.

<div class="container">
  <img src=""  class="image">
  <div class="overlay">
    <div class="text">Hello</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.


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

  • Create New...