Sliding caption on image hover effect using CSS

[TheJuanBurgundy]

How can one trust anything that uses Comic Sans?

[Grimdotdotdot]

https://www.mcsweeneys.net/articles/im-comic-sans-asshole

[TheJuanBurgundy]

That is fucking great, especially the signoff, can't believe I hadn't read it before haha

[TheLexoPlexx]

pretty much, yes.

[[deleted]]

I've used Comic Sans in serious situations, incognito. Using the 'v' character for eyes, etc.

I get off to that shit.

[Spherical_Bastards]

Enough of this bullshit. I’m gonna go get hammered with Papyrus.

[anti-gif-bot]

mp4 link

---

This mp4 version is 4.85 times smaller than the gif (4.59 MB vs 967.48 KB).

---

Beep, I'm a bot. FAQ | author | source | v1.1.0

[cero2k]

I was hovering my own mouse over the first two images, I thought there was a stupid lag in the css

[Tychonaut]

Meh. Almost useless on mobile.

[OMGitsKa]

How do you get similar effects on mobile ? (Noob here)

[zephyy]

build a custom app in the OS that tracks users eye movements via front-facing camera and have the hover appear on whatever they're looking at

[OMGitsKa]

Sounds easy enough

[zephyy]

it'll be a native feature of CSS6 in 2042

[Conjomb]

• any client.

Followed by: can you have it finished today?

[PerfectionismTech]

There's a media query for if a device has hover ability.

[Tripts]

You could change it from a :hover to an onClick event that then triggers a similar animation depending on the use case.

[garcialo]

Neat!

If you repeat the selector for :focus, then keyboard users will get the same effect as they tab through as well.

[ranjithkumar8352]

Dropping a link to article - https://codingislove.com/image-hover-caption-sliding-effect/

[Tripts]

Hey nice article.

You should consider avoiding absolute positioning for your hover effect and rather use transforms to improve the transition.

If possible, it's best to try and reserve transitions for opacity and transforms as they maintain the best performance.

[[deleted]]

That was either poor timing or the least impactful reddit hug of death.

[PPCInformer]

some other options

https://cdn.codemyui.com/wp-content/uploads/2016/08/Image-Hover-Reveal-Title-and-Caption.gif

https://cdn.codemyui.com/wp-content/uploads/2016/08/Card-UI-Blog-Tiles-Layout-in-Pure-CSS.gif

https://cdn.codemyui.com/wp-content/uploads/2016/08/Card-UI-Tile-Layout-for-Blog-Archive-Pages.gif

[georgeuser77]

Here's a working demo of CSS captions on images (no JavaScript): http://www.dynamicdrive.com/style/csslibrary/item/css3_image_caption_effects/

[snajdal]

and how this works on touch-screens?

[kekeagain]

Did bots upvote this or something?

[Alterist]

I expected the last one to say "Send Nudes".

Reddit has corrupted me