Lay Theme Forum

Hello @mariusjopen

Sorry about the confusion. Though I'm also experimenting with different things on the website and unable to share the actual link, here's sort of what I have so far:

In Laytheme - Custom CSS & HTML, I have set up the css as following:

Hover {
background: url('image A.jpg');
width=100px
height=150px
}
div:hover {
background: url('image B.jpg');
width=100px
heigh=150px
}

Now, I've inserted a following code, using the "page" editor section -> HTML Code, in between images that are displayed on my current page, as in the following:

<div id=hover></div>

And it shows the hovering images perfectly! The only problem is... My whole page is now responsive to the window size, meaning the size of image changes according to your window size. Yet, since I've dedicated the pixel width to <div> code, that's the only image that doesn't change its size and goes out of whack in proportion when I change the window size.

However, I realized that <div> doesn't really show up unless I dedicate the pixel width and height. So my question is, is it possible to make my <div> hovering image also respond to the changes in window size?

Thank you!

Hello,

Trying to combine css and html code to make an image change (two images with same sizes) with a simple mouse hover. Since the img src can't be changed with css only, I'm using a <div class> insert. However, I'm wondering if it's possible to have this <div> section also conform to the responsive size changes as in with my other images on the project as of now (The div section is in the middle of images, and when I set the css size fixed with px values, it remains the same regardless of window size).

Could anyone help? Thanks!