coding How do I change image background to a colour background on hover plus caption effect?

Site URL: https://cod-arugula-h424.squarespace.com/home-b

Hi there,

Password: help1234

I am hoping someone can help with coding for the following.

I'm using the inline image block in Squarespace 7.1 with the caption set to display below the image. On hover I'd like the image to rollover into a solid block colour with the caption floating up into the centre of the image.

Thank-you!

It looks like you figured it out?

11 hours ago, tuanphan said:

It looks like you figured it out?

Hello @tuanphan,

Yes I have mostly figured it out however I can't figure out how to display the caption below the image block when I'm not hovering over it? Can you help.....

This is the code I'm using:

  .image-block-wrapper { 
  filter: brightness(90%) contrast(80%) grayscale(100%);
  transition: filter .5s ease-in-out;
  }  
}

 .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay .image-caption-wrapper {
    background: rgba(0,0,0,0);
}  

.image-caption-wrapper h1
{
  color: red !important;
}

.image-block-outer-wrapper:hover figcaption {
  top: 0 !important;
    display: flex;
    align-items: center;
    background-color: #F5F4E7 !important; 
    pointer-events: none;
    transition: .5s ease-in-out;
  max-height: 100% !important;
    justify-content: center;
  position: absolute !important;
}

8 hours ago, MoniqueP said:

Hello @tuanphan,

Yes I have mostly figured it out however I can't figure out how to display the caption below the image block when I'm not hovering over it? Can you help.....

This is the code I'm using:

  .image-block-wrapper { 
  filter: brightness(90%) contrast(80%) grayscale(100%);
  transition: filter .5s ease-in-out;
  }  
}

 .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay .image-caption-wrapper {
    background: rgba(0,0,0,0);
}  

.image-caption-wrapper h1
{
  color: red !important;
}

.image-block-outer-wrapper:hover figcaption {
  top: 0 !important;
    display: flex;
    align-items: center;
    background-color: #F5F4E7 !important; 
    pointer-events: none;
    transition: .5s ease-in-out;
  max-height: 100% !important;
    justify-content: center;
  position: absolute !important;
}

 

You mean

Initial: Show title under image

Hover: Show title over overlay

Is this right?

10 hours ago, tuanphan said:

You mean

Initial: Show title under image

Hover: Show title over overlay

Is this right?

Yes that's correct.

@tuanphan Any luck with the code at all? 😊

On 3/15/2022 at 3:09 AM, MoniqueP said:

Yes that's correct.

Add this CSS

/* Initial: Move title under image */
div#page-section-62294f7df89fdf55311617ee figcaption.image-caption-wrapper {
    position: relative !important;
}

On 3/19/2022 at 9:10 PM, tuanphan said:

Add this CSS

/* Initial: Move title under image */
div#page-section-62294f7df89fdf55311617ee figcaption.image-caption-wrapper {
    position: relative !important;
}

 

Hello @tuanphan

Thank you! That has moved the title underneath the image but now when I hover the colour and the text on rollover has moved to underneath the image as well instead of over the top of the image??

It looks like this:

Instead of this...

My code now looks like this...

/* Change image to black and white */
Section[data-section-id="62294f7df89fdf55311617ee"] {
  .image-block-wrapper { 
  filter: brightness(90%) contrast(80%) grayscale(100%);
  transition: filter .3s ease-in-out;
  }  
}

/* Remove caption overlay */
 .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay .image-caption-wrapper {
    background: rgba(0,0,0,0);
}  

/* Change caption font colour */
.image-caption-wrapper h1
{
  color: black !important;
}

/* Centre caption and block colour on hover */
.image-block-outer-wrapper:hover figcaption {
  top: 0 !important;
    display: flex;
    align-items: center;
    background-color: #F5F4E7 !important; 
    pointer-events: none;
    transition: .3s ease-in-out;
  max-height: 100% !important;
    justify-content: center;
  position: absolute !important;
}

/* Initial: Move title under image */
div#page-section-62294f7df89fdf55311617ee figcaption.image-caption-wrapper {
    position: relative !important;
}

Thank-you!