text when hover over image

[Johannes Meger]

Hi,
I´ve read through all the topics but couldnt find a concrete answer.
Is there a way to show a text when hover over an image like here? https://www.juliasteinigeweg.de/work/
I need this for "normal" images beside my projects.
thanks for your help.

[arminunruh]

how about this?

Make image caption show up on mouseover:
http://laythemeforum.com:4567/topic/11141/text-link-on-image-hover/6

[Johannes Meger]

hey. I saw this already, tried it out but dont get it :-)
The "moving text with mouse" worked, but I only want to hover over the image and want a text show up (plus link). When I enter the code you posted at the bottom there I cant see any effect.

and it looks like this:

But maybe I´m to stupid, so can you tell me, what I have to do for having a text on mouse hover? (and how to set where its aligned)
thanks

[Johannes Meger]

@arminunruh would be nice if you can help me with this. thanks.

[arminunruh]

hey!

ah so you want a text below the image to show up when you hover over the image?

how about this code:
https://laythemeforum.com/topic/11141/text-link-on-image-hover/6

and sorry about the late reply, seems like i missed your reply here

[Johannes Meger]

hey no worries. I want a text over the image when hover with mouse over it. like on this site: https://www.juliasteinigeweg.de/work/
And if possible to align the text and change fontstyle.

[arminunruh]

oh sorry, i just realized the code didn't work anymore.

this is the right css:

/*this makes the caption appear on mouseover*/
.type-img .caption{
    opacity: 0;
    transition: opacity 300ms ease;
}
.type-img:hover .caption{
    opacity: 1;
}

/*this makes the caption be on the image, centered*/
.type-img .caption{
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

/*this makes the caption click through*/
.type-img .caption{
pointer-events: none;
}

[arminunruh]

if you want to set the position of the text differently for different images, use this CSS instead:

/*this makes the caption appear on mouseover*/
.type-img.mouseover-caption .caption{
    opacity: 0;
    transition: opacity 300ms ease;
}
.type-img.mouseover-caption:hover .caption{
    opacity: 1;
}

/*positions*/
.type-img.mouseover-caption.center-center .caption{
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}
.type-img.mouseover-caption.top-left .caption{
    position: absolute;
    top: 20px;
    left: 20px;
}
.type-img.mouseover-caption.bottom-left .caption{
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.type-img.mouseover-caption.top-right .caption{
    position: absolute;
    top: 20px;
    right: 20px;
    *{
        text-align: right!important;
    }
}
.type-img.mouseover-caption.bottom-right .caption{
    position: absolute;
    bottom: 20px;
    right: 20px;
    *{
        text-align: right!important;
    }
}

/*this makes the caption click through*/
.type-img.mouseover-caption .caption{
pointer-events: none;
}

then right click an image and click "set html class and id":

now enter:

mouseover-caption top-right

or
mouseover-caption top-left
mouseover-caption center-center
mouseover-caption bottom-left
mouseover-caption bottom-right

and the font size and font color you can edit when you edit the caption of the image. the caption will be the text thats on top of the image:

[arminunruh]

actually there is a new way to do this thats easier.
simply put text on the images using the new settings in the sidebar:
https://laytheme.com/documentation/gridder-elements.html#text-on-image

and use this CSS to make them appear on hover:

html.no-touchevents .lay-text-on-element-overlay{
opacity: 0;
transition: opacity 300ms ease;
}

html.no-touchevents .col:hover .lay-text-on-element-overlay{
opacity: 1;
}