Jump to content

[Share] Hover icon image - Show text on right

Recommended Posts

Description: Hover Icon/Image (left) - Show more text on right

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

image.png.3a47baf09934053dc9371be9b00dfb24.png

#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

image.png.9e7cc01e8a28fe64273a0c405edcd1cd.png

#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>

image.thumb.png.0554a44c5e959ac99695de31958b7888.png

#4. Notes

image.thumb.png.6cc12a291d59c6fca0d822b6a279859c.png

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
  • Replies 1
  • Views 378
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.