Jump to content

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

Recommended Posts

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!

 

1373583163_Exampleofhover.thumb.png.700513d687d44ac6ebb1096b636612bd.png

Edited by MoniqueP
Link to comment
  • MoniqueP changed the title to How do I change image background to a colour background on hover plus caption effect?
  • Replies 7
  • Views 362
  • Created
  • Last Reply

Top Posters In This Topic

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

1214784796_ScreenShot2022-03-14at2_12_52PM.thumb.png.b2c1514cd03fb08f06d0ae0d5b3105d2.png

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;
}

 

Link to comment
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.....

1214784796_ScreenShot2022-03-14at2_12_52PM.thumb.png.b2c1514cd03fb08f06d0ae0d5b3105d2.png

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?

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
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;
}

 

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

2144126937_ScreenShot2022-03-21at9_32_26AM.thumb.png.42aeec0e139e54a66f4b345c984e0d28.png

 

Instead of this...

365039831_ScreenShot2022-03-21at9_32_35AM.thumb.png.2e8d75be13de49b1a973eb2deff62375.png

 

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!

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

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.