text / link on image hover

[dingdong]

hi!
i just build a new frontpage:
https://www.mikeabmaier.com/fotos-fotograf-mike-abmaier-copy

I would like a text (title) to appear on an image when the mouse hovers over it. Ideally, it should also be a link to another page. These are not project thumbnails. Is there an easy way to do this?

is there also a way to make the scroll at the beginning a little bit more sexy?
i used browser height for row height so i only see these two images and made them sticky. but it doesnt look / feel that good when scrolling... any ideas for this layout?

[arminunruh]

i think you should use the parallax feature instead of sticky

https://laytheme.com/documentation/simple-parallax.html#ajax-container

[arminunruh]

if you want text to follow your mouse when your mouse is over an image:

http://laythemeforum.com:4567/topic/10519/make-image-caption-follow-mouse

[dingdong]

@arminunruh am i right, that i have to give all images parallax if i use it?
i just tried only the second row, but then there is a huge white space... actually the problem is online between first and second row...

[dingdong]

@arminunruh said in text / link on image hover:

if you want text to follow your mouse when your mouse is over an image:

http://laythemeforum.com:4567/topic/10519/make-image-caption-follow-mouse

That works.
but is it also possible to have the text bottom right / left on the image and no "follow mouse"?

[arminunruh]

am i right, that i have to give all images parallax if i use it?
i just tried only the second row, but then there is a huge white space... actually the problem is online between first and second row...

no you dont. just give some of them a small parallax. the ones at the very bottom, dont give them a parallax.

but is it also possible to have the text bottom right / left on the image and no "follow mouse"?

Oh you didnt want the follow mouse I see.
You just wanted it to show up on mouseover.

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

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

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

now in the gridder just right click an image, and click link image

this way you can have a link on an image

[dingdong]

@arminunruh said in text / link on image hover:

am i right, that i have to give all images parallax if i use it?
i just tried only the second row, but then there is a huge white space... actually the problem is online between first and second row...

no you dont. just give some of them a small parallax. the ones at the very bottom, dont give them a parallax.

hm, the images with red background (color just to make it visible) have parallax 1, green has 1,7.
now the purple actually has to be more than 1,7 - but i just want the "original" distance from green to purple. so actually all below "green" has to have 1,7... no?

[dingdong]

The text seems to work, THANKS!!! :-*

[arminunruh]

hey about the parallax, you'll have to figure out yourself what values you would like to use. If it doesn't work they way you like maybe its not the way to go.

[arminunruh]

but i would disable the sticky effect on the first row, i think it doesn't fit so well there

[dingdong]

@arminunruh works fine, but in mobile version image 4 has different space above and below than other images?!
is it because of the "long caption text"?
https://www.mikeabmaier.com

[arminunruh]

hey sorry i dont really know where to look on your site i just see some normal images under each other on mobile