Change image using mouse hover state

https://vmedia.de/artist-messeservice-juli-2021-v7/team/

All done with CSS inside Blocs. If anybody needs a how-to let me know and I’ll post it here.

One thing I want to add to improve it is to pre-load the images, so the transition is smoother …

@gary Beautifully designed work love the portfolio gallery! :grinning:
I would love to see your “How to”, Since I’m learning how to play around with code and get better at Blocs.

1 Like

Hi @gary.

Nice. You could avoid that jump (with the image load), by stacking the images rather than replacing them. Then on hover you adjust the opacity. All that can be done in the class editor.

You could then add a transition style in some CSS to add fades etc. (that would be the only bit you need to add to the page header).

Quick example… something like this (few ways you can do it).

Example_Image_Swap_On_Hover.bloc (1.5 MB)

6 Likes

Very nice gary…I am ALWYS interested in “how to”

Thanks

Rich

@PeteSharp thank you for sharing this Bloc, I’m going to go through it, so I get a better understanding of How to. :smile:

I like your idea better! Thanks! I had to use some Javascript to pre-load the images in the background, which worked; but your way is easier - thanks!

1 Like

Take a look at the solution from @PeteSharp (above) … his is much more “elegant” … :slight_smile:

Thanks @KBConcepts ! i would be glad to share my solution with you, but first take a look at the solution from @PeteSharp - his is much easier and better than mine!

1 Like

You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.

Although you could use a pseudo-class for this, you still have the loading issue on first hover, which the OP is wanting to avoid.

Thank you..