Hover action not working since adding custom CSS to make container responsive

  • 23 July 2021
  • 1 reply

I am making a grid where there is a background image and when the mouse hovers over the box, a solid color appears and text appears. See screenshot below.

I wanted to make the images responsive, so I added the following code:

.imageContainer {
position: relative;
padding-bottom: 25%;
width: 100%;
float: left;
height: 0;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;

The images are responsive now, but the hover action no longer works (no longer showing the solid color). The text is also not responsive, even if I add the CSS class imageContainer. In the image below, the box with the text should be showing the color #FF3333. I added the hover color change using Elementor.



1 reply

Userlevel 2
Badge +1

Have you tried using the CTA widget? You can do all of this without a single line of css.