Jump to content

Image Color Rollover and Centered Caption

Recommended Posts

  • Replies 6
  • Views 868
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thanks, that's so helpful. 

If it's not too much there are a couple of tiny things? 

As the cursor moves off the image the caption pops down which looks a bit strange... is there a way to fix this?

Also can I change the caption text color? Also move it a bit to the right? 

And is there a way to manually change the gaps between the images so I can make them a bit smaller? 

Thanks again for all your help!

Oz

 

Link to comment
9 hours ago, Oz_Soma said:

Thanks, that's so helpful. 

If it's not too much there are a couple of tiny things? 

As the cursor moves off the image the caption pops down which looks a bit strange... is there a way to fix this?

Also can I change the caption text color? Also move it a bit to the right? 

And is there a way to manually change the gaps between the images so I can make them a bit smaller? 

Thanks again for all your help!

Oz

 

Use this new code

/* Home-1 hover */
body#collection-61a8417fae3c994574d20c6e {
/* make green full height */
.image-block-outer-wrapper figcaption {
    max-height: 100% !important;
}
.image-block-outer-wrapper:hover figcaption {
    top: 0 !important;
    display: flex;
    align-items: center;
    background-color: rgba(1,110,38,.9) !important; /* green overlay */
    pointer-events: none;
    transition: all ease .3s;
}
figcaption {
    transition: all ease .3s;
    justify-content: flex-end; /* align text right */
}
figcaption * {
    color: red !important; /* text color */
}}

 

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

Thanks @tuanphan

It still popped off weirdly when the cursor moves off instead of fading so I removed that animation so it now doesn't fade out, but that's fine. 

Do you have code so I can move the text a tiny bit to the right (not right aligned), maybe 20px to the right? 

Also can I close the gaps a bit between the images?

Thanks again for all your help!

Screenshot 2022-01-05 102956.jpg

Link to comment

I see you added padding: 3em; to solve this

With space between images, use this new CSS

/* home-1 4 images gap */
@media screen and (min-width:768px) {
/* inabox */
div#block-yui_3_17_2_1_1641184927491_5184 {
    padding-right: 5px;
    padding-bottom: 5px;
}
/* hello */
div#block-yui_3_17_2_1_1641184927491_6993 {
    padding-right: 5px;
}
/* another project */
div#block-yui_3_17_2_1_1641184927491_6119 {
    padding-bottom: 5px;
    padding-left: 5px;
}
/* h2fa */
div#block-yui_3_17_2_1_1641184927491_8938 {
    padding-left: 5px;
}}

 

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

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.