Image swap with mouse hover with <div> responsive size?

[dsong3832]

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!

[mariusjopen]

Hi @dsong3832
this is very difficult to understand.

Can you show us a little sketch or even a link to your website?

You could use background images of CSS:
https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover

Best!

Marius

[dsong3832]

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!

[mariusjopen]

Hi @dsong3832
ok. Now I understand.

Your solution is a quick and dirty solution. but possible. I would not use it for a complex website. But for a portfolio website which you build yourself it should be fine.

Otherwise you need to use jQuery.

First of all your code looks pretty messed up. Try this:

#hover {
background: url('image A.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 30vw;
height: 10vw;
}

#hover:hover {
background: url('image B.jpg');
}

<div id="hover"></div>

Play around with the size to see what fits you the best.Also you can play around with the background-image-size.

I hope I could help!

Have a good day!

Marius