Customize Image Hover

Site URL: https://www.lmartinid.com/portfolio

Hello,

For my portfolio page, I'd love to either have the hover change the image to a solid color background and text like this OR have color image change to black and white image with text (text will be title of project).

Any CSS help would be appreciated! THANK YOU!

If you add text in Image Block (not add a Text Block), then we can use CSS to achieve hover effect.

Thanks @tuanphan, I added Caption overlay in hover to Bay Laurel image...is that what you meant? Now I need CSS code to achieve the desired design described below:

For my portfolio page, I'd love to either have the hover change the image to a solid color background and text like this OR have color image change to black and white image with text (text will be title of project).

Any CSS help would be appreciated! THANK YOU!

On 9/9/2021 at 12:12 AM, BradyAvenue said:

Thanks @tuanphan, I added Caption overlay in hover to Bay Laurel image...is that what you meant? Now I need CSS code to achieve the desired design described below:

For my portfolio page, I'd love to either have the hover change the image to a solid color background and text like this OR have color image change to black and white image with text (text will be title of project).

Any CSS help would be appreciated! THANK YOU!

Hi,

Add to Design > Custom CSS

/* Portfolio image hover */
div#page-54a6b53ae4b0c309d017f70d {
figcaption.image-caption-wrapper {
    max-height: unset !important;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-caption p {
    margin: 0 !important;
}
}

@tuanphanI added the CSS code, yet the desired hover design is not happening. 

DESIGN DESIRED: For my portfolio page, I'd love to either have the hover change the image to a solid color background and text like this OR have color image change to black and white image with text (text will be title of project).

On 9/12/2021 at 11:28 PM, BradyAvenue said:

@tuanphanI added the CSS code, yet the desired hover design is not happening. 

DESIGN DESIRED: For my portfolio page, I'd love to either have the hover change the image to a solid color background and text like this OR have color image change to black and white image with text (text will be title of project).

Just tested on browser & it works here.

Can you add & keep the code? We can check it again easier?

It worked @tuanphan, thank you so very much! However, the link to the pages from those thumbnails is not working now...can you help resolve that?

On 9/26/2021 at 6:08 AM, BradyAvenue said:

It worked @tuanphan, thank you so very much! However, the link to the pages from those thumbnails is not working now...can you help resolve that?

Use this new code

/* Portfolio image hover */
div#page-54a6b53ae4b0c309d017f70d {
figcaption.image-caption-wrapper {
    max-height: unset !important;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
	pointer-events: none; /* enable click */
}
.image-caption p {
    margin: 0 !important;
}
}

This is AWESOME, thank you @tuanphan - how do I increase the font size of the captions/font of the captions? They are SO small by default.

On 9/27/2021 at 11:37 AM, BradyAvenue said:

This is AWESOME, thank you @tuanphan - how do I increase the font size of the captions/font of the captions? They are SO small by default.

change this code

.image-caption p {
    margin: 0 !important;
}

to this

.image-caption p {
    margin: 0 !important;
	font-size: 50px !important;
	font-family: monospace;
}

@tuanphan Thanks so much !! Works great! Except I realized just now it messed up my homepage gallery text. Can you help me create code that will apply JUST to my portfolio page PLEASE 🙂 ?

On 10/5/2021 at 7:12 AM, BradyAvenue said:

@tuanphan Thanks so much !! Works great! Except I realized just now it messed up my homepage gallery text. Can you help me create code that will apply JUST to my portfolio page PLEASE 🙂 ?

/* Portfolio image hover */
div#page-54a6b53ae4b0c309d017f70d {
figcaption.image-caption-wrapper {
    max-height: unset !important;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
	pointer-events: none; /* enable click */
}
.image-caption p {
    margin: 0 !important;
	font-size: 50px !important;
	font-family: monospace;
}
}

Use this code

/* Portfolio image hover */
div#page-54a6b53ae4b0c309d017f70d {
figcaption.image-caption-wrapper {
    max-height: unset !important;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
	pointer-events: none; /* enable click */
}
.image-caption p {
    margin: 0 !important;
	font-size: 50px !important;
	font-family: monospace;
}
}