Image Color Rollover and Centered Caption

Site URL: https://www.somastudios.co/home-1

Hi, 

I am trying to create rollovers for my images which look like how they behave in my Gallery page. In the Gallery you rollover and a transparent green fill goes on top with centered captions. Is there any way to do this with CSS on normal images like at the bottom of the added link on a non-Gallery page?

Thnks

Oz

Thanks @tuanphan! Legend. 

Is it possible to make the green color have transparency over the image too?

And also change the color of the text? 

And also have the hover fade up too?

Thanks !

Also (sorry) my links no longer work when I use this code. I want to be able to click on an image and take you to another page of my site. 

Thank you

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

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 */
}}

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!

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