Hover on simple Images

[mathias]

hi armin, another question: how can i ad hover-effects to pictures that are no project-thumbnails? i want pictures on a simple page to become a bit darker and show the caption when hovering. would be great if you or anybody else could help.
thanks!

[arminunruh]

hey, you can do this with custom css!

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

Css is not so hard to do! There are little video courses about it like the one I recommend on khan university in the documentation section "custom css"

[mathias]

nice! thank you.
only the "caption" needs to be removed still. it appears underneath the pic but i would like to have it in the center of it.
...i tried to understand css a bit but i couldnt't find a way to solve this problem....

[mathias]

www.mathiaskutt.com

[arminunruh]

Try this:

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

[mathias]

YES!
GREAT!

[dellmerca]

Try this simple....Image Hover Sample

Dell

[Organstudio]

@arminunruh said in Hover on simple Images:

hey, you can do this with custom css!

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

Css is not so hard to do! There are little video courses about it like the one I recommend on khan university in the documentation section "custom css"

Hi Armin,

Is there a way to modify this CSS so that it only applies to the images on a page that contain links (rather than all images)?

Thanks!
Norman

[mariusjopen]

Dear @Organstudio

that should work:

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

Let me know!

Marius

[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!