Image + text Overlay Hover Effect

Site URL: https://www.azulstudio.co.uk/

Hello!

my site URL is https://www.azulstudio.co.uk

I am trying to add the colour + text overlay effect when hovering over the images on the "work" section.

For example, when hovering over the first picture on the right of "WORK" I would like it to be covered with a solid color rgb (100,39,39) and a title to appear (in this case "Decorex 2021).

I have tried several tutorials but none of them are working, as I feel that I am not targeting the specific image correctly.

Any help is very much appreciated!

thank you!

Mariana

Try adding this to Design > Custom CSS. If it works, I will send quick guide for other images

div#block-yui_3_17_2_1_1661175829962_534783 {
.sqs-image-content:after {
    content: "Decorex 2021";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    z-index: 99999;
    font-size: 30px;
    opacity: 0;
    background-color: transparent;
    transition: all 0.3s;
	pointer-events: none;
}
.sqs-image-content {
    position: relative;
}
.sqs-image-content:before {
    content: "";
    background-color: rgba(100,39,39,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    opacity: 0;
    transition: all 0.3s;
	pointer-events: none;
}
&:hover .sqs-image-content:before, &:hover .sqs-image-content:after{
    opacity: 1;
    transition: all 0.3s;
}}

Hi Tuanphan!

IT WORKED!!

I just changed a few things regarding the colour and fonts but it's perfect!

Could you show me how to apply it to the other images as well?

THANK YOU AGAIN!!!!

M

Hi again!

I just realized that the image link does not longer work when the hover effect is applied.

Is there a way to solve that?

thank you!

M

18 hours ago, MarianaGR said:

Hi again!

I just realized that the image link does not longer work when the hover effect is applied.

Is there a way to solve that?

thank you!

M

Updated the code. You can check again.

amazing! it's working now,

thank you for solving this.

last question, do I have to copy and modify the code for each one of the images on the block? or is there a quicker way to do it?

thanks again tuanphan!

also, is there a way for the hover effect to work on mobiles? thank you again!

38 minutes ago, MarianaGR said:

is there a way for the hover effect to work on mobiles?

Mobile devices don't have a hover state because there is no pointer device like a mouse. It's best to avoid using hover effects now that mobile devices represent more than 50% of site traffic.

Hi,

I used that code and it worked perfectly on desktop. Is there a way to remove the hover effect on mobile and have the text aways showing? 

In case that can not be done, I have a follow up question. Is there a way to add permanent text overlay over an image? Few of the images on my website are clickable and I want to have some text in the middle of the images. The problem with the traditional solution to that, adding a text block, is that the part where the text block sits becomes unclickable 😞

On 8/26/2023 at 9:47 AM, kenvelo said:

Hi,

I used that code and it worked perfectly on desktop. Is there a way to remove the hover effect on mobile and have the text aways showing? 

In case that can not be done, I have a follow up question. Is there a way to add permanent text overlay over an image? Few of the images on my website are clickable and I want to have some text in the middle of the images. The problem with the traditional solution to that, adding a text block, is that the part where the text block sits becomes unclickable 😞

Yes. We can remove hover on mobile. If you share link to page where you have problem, we can help easier