Hover Image Effect

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

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

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 🙂 

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

36 minutes ago, bangank36 said:

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

Thankyou very much sir, my site password is 123456

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)

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

35 minutes ago, ArvinPaul said:

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

Glad it helps

Just now, bangank36 said:

Glad it helps

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

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

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

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!