Hover on simple Images

[Organstudio]

@mariusjopen said in Hover on simple Images:

.img a img{
transition: all 300ms ease;
}

.img:hover a img{
filter: brightness(0.9);
}

.img a .caption{
opacity: 0;
transition: opacity 300ms ease;
}

.img:hover a .caption{
opacity: 1;
}

Thanks Marius – works perfectly!

[mariusjopen]

Glad to hear!

[Subliner]

@arminunruh said in Hover on simple Images:

.img img{
transition: all 300ms ease;
}

.img:hover img{
filter: brightness(0.9);
}

.img .caption{
opacity: 0;
transition: opacity 300ms ease;
}

.img:hover .caption{
opacity: 1;
}

Hello Armin

This post is just what I am looking for, but there is something that I am not doing in the right way. I add the code to my Custom CSS and something is working because when I put the mouse over I can see the darkening of the image but I can not see the caption. Tha code that I put is:

.img img{
transition: all 300ms ease;
}

.img:hover img{
filter: brightness(0.9);
}

.img .caption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.img:hover .caption{
opacity: 1;
}

The only thing that I need is to see the caption over the image at the center of the photo that is not a project thumbail. This one, for example is in a Category and inside a project too. The darkening works in every situation but I can not see the caption.

Thanks!

[mariusjopen]

Dear @Subliner
can you post a link to your website?

Thank you :-D

Marius

[Subliner]

This post is deleted!

[mariusjopen]

Dear @Subliner
can you tell we which image you want to have the effect applied to and which piece of text you want to appear in it?

Best!

Marius

[Subliner]

This post is deleted!

[mariusjopen]

Dear @mathias
can you add a caption that I can see where the problem with the code is?

Best!

Marius

[Subliner]

This post is deleted!

[mariusjopen]

Dear @mathias
but you added a caption for the image?
You need to add the caption by selecting an image and then click on edit caption.

Best!

Marius

[Subliner]

This post is deleted!

[Subliner]

@arminunruh Hello!

It´s working for me, but it will be perfect if I can something like a "fade to white" .. Put white transparency when hover to see the black text better.

Thanks!

[mariusjopen]

Dear @Subliner
you can achieve this by using CUSTOM-CSS.

Best!

Marius

[Subliner]

This post is deleted!

[Subliner]

@mariusjopen It´s done!

Thanks!

[CharlotteG]

This post is deleted!

[CharlotteG]

Hi @mariusjopen

thank you so much for this, it is exactly what I was looking for. However I don't seem to be getting the captions to show. I don't have captions on every image yet, though the first couple of images on this page should be showing them —> https://www.ritaferrando.com/walls Would be great if you could help me out!

Best,
Charlotte

[mariusjopen]

Dear @CharlotteG
I don't see any captions on your website :-/
Best!

Marius

[CharlotteG]

Hi @mariusjopen,

Thank you for your response.

I know. I can't quite figure out why that is because I definitely put captions in for a lot of the images. See screenshot below. Still they will not show.

This is the code I am using:

.img img{
transition: all 300ms ease;
}

.img:hover img{
filter: brightness(0.5);
}

.img .caption{
opacity: 0;
transition: opacity 300ms ease;
}

.img:hover .caption{
opacity: 1;
}

.img .caption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Best,
Charlotte

[CharlotteG]

Hi @mariusjopen,

I figured it out. I wasn't aware that putting in a caption in the media library or inside the gridder does not translate to the page.

I would now like to do the same to images in a carousel. Is that possible?

Best,
Charlotte