Add additional image on hover

Thank you for creating such an awesome theme!

Using the image element from Elementor, is there a way to show on the uploaded image another image when hovering over that uploaded image?

Say I have an image with a mountain. When hovering over that image, I want to show the text ‘Mountain’ over that image, with a certain background in order to make the text visible enough.

Best regards,
Jenco

Hello Jenco, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.elementor-widget-image .elementor-image::after {
  content: 'Hover text';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  padding-top: 26%;
  color: white;
  font-size: 32px;
  opacity: 0;
  transition-duration: 0.5s;
  text-align: center;
}

.elementor-widget-image .elementor-image:hover::after {
  opacity: 1;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hi Roman,

Thank you for your answer.

I added the additional CSS and it indeed shows a layer for any text, which is the text ‘Hover text’ (indicated in the CSS). However the text ‘Hover text’ now shows for each image. How can I make that text variable to images?

Best Regards,
Jenco

Hello Jenco,

Each elementor widget has a unique class (.elementor-element-5835b5b8 and .elementor-element-5835b5b9 below). You can use it to target the specific widget, so please try to use this CSS code instead of previous:

.elementor-widget-image .elementor-image::after {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  padding-top: 26%;
  color: white;
  font-size: 32px;
  opacity: 0;
  transition-duration: 0.5s;
  text-align: center;
}

.elementor-widget-image .elementor-image:hover::after {
  opacity: 1;
}

.elementor-element-5835b5b8 .elementor-image::after {
  content: 'Hover text for a widget';
}

.elementor-element-5835b5b9 .elementor-image::after {
  content: 'Hover text for another widget';
}

You can find the unique widget class by doing a right click on it, Inspect Element:

Please let me know if you need more help.

Kind Regards, Roman.
aThemes Support

This works perfectly with unique identification of the image elements. Thank you.

Kind regards,
Jenco

You are welcome Jenco! :slight_smile:

Kind Regards, Roman.
aThemes Support