Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hover Image Effect


ArvinPaul

Question

11 answers to this question

Recommended Posts

  • 0
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

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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)

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
35 minutes ago, ArvinPaul said:

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

Glad it helps

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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
  • 0
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! 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...