Jump to content

Hover Image Effect

Recommended Posts

  • Replies 11
  • Views 952
  • Created
  • Last Reply
17 hours ago, ArvinPaul said:

Site URL: https://manatee-azalea-la3y.squarespace.com/

Can anyone help me recreate this effect using only a image block? I achieved this effect by stacking to images to eachother and using a code block but I wanted to use a regular image block if possible
WEBSITE PASSWORD: 123456

 

Instead of applying the css hover effect on code block you can apply it on image caption

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 minutes ago, bangank36 said:

Instead of applying the css hover effect on code block you can apply it on image caption


.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper

 

what I did with the top one is I stacked 2 images to each other and I put a code that when I hover it shows the image under it, I really don't have any idea how to recreate that with any css code or using an image block I don't have any background around using code that is why im having a hard time 🙂 

Link to comment
22 minutes ago, ArvinPaul said:

what I did with the top one is I stacked 2 images to each other and I put a code that when I hover it shows the image under it, I really don't have any idea how to recreate that with any css code or using an image block I don't have any background around using code that is why im having a hard time 🙂 

Let's create an image block with captions and let me know your site password I will help check

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
20 minutes ago, ArvinPaul said:

Thankyou very much sir, my site password is 123456

try

section[data-section-id="60517c190020b64a5f032c5b"] .image-block-wrapper:after {
    opacity: 0.4;
  	background: #000;
    content: 'HOVER HERE!';
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    align-items: center;
    font-weight: bold;
    color: #fff;
    font-size: 1.5rem;
    font-family: brandon-grotesque;
  transition: opacity 0.5s;
}
section[data-section-id="60517c190020b64a5f032c5b"] .image-block-wrapper:hover:after {
  opacity: 0;
}

the text: section[data-section-id="60517c190020b64a5f032c5b"] indicate the section where you want to apply the effect, incase you need to identify other sections, use this extension to find out the name

Squarespace ID Finder - Chrome Web Store (google.com)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
35 minutes ago, ArvinPaul said:

Wow! thank you very much sir it works well for me this helped me allot.

Glad it helps

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
41 minutes ago, ArvinPaul said:

I have one question, how do I make the content different in each images is it possible?

Try to identify the block id, they are unique across block as well

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, bangank36 said:

Try to identify the block id, they are unique across block as well

Thank you I did it, this is what I did 

[SECTION ID] .image-block-wrapper{
  border: 5px solid #E63946;
}

[SECTION ID] .image-block-wrapper:after {
 
      opacity: 0.8;
      background: #fff;
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    align-items: center;
    font-weight: bold;
    color: #000;
    font-size: 31.5px;
    font-family: Rift;
  transition: opacity 0.4s;
}
[SECTION ID] .image-block-wrapper:hover:after {
  opacity: 0;
}

[BLOCK ID 1ST PIC] .image-block-wrapper:after {
  content: 'Termite Inspections';
}
[BLOCK ID 2ND PIC] .image-block-wrapper:after {
  content: 'Termite Treatment';
}
[BLOCK ID 3RD PIC] .image-block-wrapper:after {
  content: 'Termite Nest Treatment';
}
[BLOCK ID 4TH PIC] .image-block-wrapper:after {
  content: 'Cockroach Treatments';
}
[BLOCK ID 5TH PIC] .image-block-wrapper:after {
  content: 'Ants Treatments';
}
[BLOCK ID 6TH PIC] .image-block-wrapper:after {
  content: 'Spider Treatments ';
}
[BLOCK ID 7TH PIC] .image-block-wrapper:after {
  content: 'Wasp Treatments';
}

I HOPE THIS HELPS OTHERS FINDING SOLUTION

Link to comment
45 minutes ago, ArvinPaul said:

Thank you I did it, this is what I did 

[SECTION ID] .image-block-wrapper{
  border: 5px solid #E63946;
}

[SECTION ID] .image-block-wrapper:after {
 
      opacity: 0.8;
      background: #fff;
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    align-items: center;
    font-weight: bold;
    color: #000;
    font-size: 31.5px;
    font-family: Rift;
  transition: opacity 0.4s;
}
[SECTION ID] .image-block-wrapper:hover:after {
  opacity: 0;
}

[BLOCK ID 1ST PIC] .image-block-wrapper:after {
  content: 'Termite Inspections';
}
[BLOCK ID 2ND PIC] .image-block-wrapper:after {
  content: 'Termite Treatment';
}
[BLOCK ID 3RD PIC] .image-block-wrapper:after {
  content: 'Termite Nest Treatment';
}
[BLOCK ID 4TH PIC] .image-block-wrapper:after {
  content: 'Cockroach Treatments';
}
[BLOCK ID 5TH PIC] .image-block-wrapper:after {
  content: 'Ants Treatments';
}
[BLOCK ID 6TH PIC] .image-block-wrapper:after {
  content: 'Spider Treatments ';
}
[BLOCK ID 7TH PIC] .image-block-wrapper:after {
  content: 'Wasp Treatments';
}

I HOPE THIS HELPS OTHERS FINDING SOLUTION

You're rock! 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.