tuanphan Posted October 1 Share Posted October 1 Description: Hover Icon/Image (left) - Show more text on right Demo: https://tuanphan-demo01.squarespace.com/hover-image-show-text-v2?noredirect Pass: abc If the code doesn't work, you can send page url + exact code you added, I can check problem easier. #1. First, add 4 images on the left – and 4 texts on the right #2. Find ID of 4 Image Blocks - 4 Text Blocks. In my example, we will have: Apple image: #block-a16f28dd42da9145711d Google image: #block-9a5aeea61fa370ac4107 Microsoft image: #block-cf9c87c8d6ee3e3d0eb4 Instagram image: #block-66dfef9aa2bb029a9678 Apple text: #block-e69361f90a576038c4bf Google text: #block-1af8266848d89912cc72 Microsoft image: #block-3d169036addfa212ffdc Instagram text: #block-214fb4e9d9e6daf1aabd #3. Use this code to Page Header Injection (page where you added 4 Images/4 Texts) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { const showBlock = "#block-e69361f90a576038c4bf"; $(showBlock).addClass("show"); // Hover effect for multiple blocks const blocks = { '#block-a16f28dd42da9145711d': showBlock, '#block-9a5aeea61fa370ac4107': "#block-1af8266848d89912cc72", '#block-cf9c87c8d6ee3e3d0eb4': "#block-3d169036addfa212ffdc", '#block-66dfef9aa2bb029a9678': "#block-214fb4e9d9e6daf1aabd" }; $.each(blocks, function(trigger, target) { $(trigger).hover(function() { $(target).addClass("show").siblings('div').removeClass("show"); }, function() { $(target).removeClass("show"); }); }); }); </script> <style> #block-e69361f90a576038c4bf, #block-1af8266848d89912cc72, #block-3d169036addfa212ffdc, #block-214fb4e9d9e6daf1aabd { display: none; } .show { display: block !important; } </style> #4. Notes Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment