How to adjust size of replacement image when using hover to change image

Support
#1

My website is test.worldhorizonsusa.org.

I am trying to make it so that when people mouse over any of the field images the image is replaced with another image where the background is darkened and text appears. I’ve been doing this using custom CSS that simply replaces the image with a new one but I’m having trouble setting the correct size of the replacement image.

Replace image with another image on hover
#2

Hi there,

Please update the current CSS you have to:

.north-africa-hover:hover {
    content: url(http://www.test.worldhorizonsusa.org/wp-content/uploads/North-Africa-hover.jpg);
    z-index: 999;
    width: 100% !important;
    padding: 0;
}

Hope this helps.

#3

This worked perfectly! Thank you!

#4

You’re welcome :slight_smile:

#5

Now I have the problem of a slight difference in size between my original image and the new one. How can I modify the exact size of the original rows without adding elements to them? The size of the row seems solely dependent on the height of the elements inside the row.

#6

Hi There,

You can add gap elements to your columns. Gap Elements are really useful because they have the functionality of hiding it based on screenwidth.

That way you can add amd hide gaps depending on the screensize and that is really useful for responsive design.

Another alternative is add more padding to your rows.

You also can set the minimal height of your row by adding the following CSS on the Inline CSS box that you find on the customize tab of your row:

min-height: 400px;

Hope it helps

#7

I tried both of these solutions. It doesn’t seem to do what I want. No matter how I change it I cannot force the images to be the same size on all screen sizes.

#8

Hi there,

You can edit the custom CSS you have. Instead of using:

You can change the actual background image of the background layer using this:

.north-africa-hover:hover .x-bg * {
    display: none;
}

.north-africa-hover:hover .x-bg {
    background-image: url(http://www.test.worldhorizonsusa.org/wp-content/uploads/North-Africa-hover.jpg);
    background-size: cover;
}

Hope this helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.