Tutorial & code
Image Swap on Hover
This shows a column (or child column) background image until a mouse hover show the Beaver Builder photo module image.
Minimum BB plugin required: Lite Saved under: Rows
Skill level: Beginner Contributor: David Waumsley
Template Location
Video
Notes
With Beaver Builder small optimized background images seem to load faster than those in the image module. This could be down to native lazy loading in WordPress. If you see a flash of the photo image perhaps try reversing the opacity in the CSS below and swap the image over.
See the Image Swap on Hover template in action.
Code
CSS
@media (min-width: 992px){ /* This hides the photo image on desktops only. Remove this line and the last } if you want the column background image to show in mobile devices. Remember there's no hover over on mobile devices*/ .fl-module-content img{ opacity:0; transition: .8s ease-in-out /* adjust the transition speed */ } .fl-module-content img:hover{ opacity:1; transition: .8s ease-in-out; /* adjust the transition speed */ } } /* Remove this if deleting @media */ /* The photo module image is hidden until hovered over. This could be reversed, but you can get a flash of the background image on page load. */
Discounts On These Two Lifetime Deals:
MainWP. Discount code "digitalfreedoms" 15% off
WP Code Box. Discount code "beaverjunction" 25% off
--------------------------------------------------------------
Can you improve this template?
We'd love it if you can so please comment and share.
For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.
Hi David. Thanks for this, but unfortunately on mobile it’s not working. Would it be possible to have image swap on hover for desktop and image swap on click on tablet and mobile?
Hi Bart, Sorry if I did not explain it. This was only meant to be for those silly desktop effects. It needs JavaScript to change on click like this: https://tutorial.eyehunts.com/js/swap-images-in-javascript-simple-onclick-image-swap-example/.
At some point I must look in to creating something with that.