Applying transition effects to thumbails

  • bobjones

    (@bobjones)


    9 years, 8 months ago

    I’ve had limited success applying transition effects with this CSS: .popular-posts img:hover { opacity: 1; transition: all 0.4s; filt: brightness(115%); }.

    Transitions work better, though, when applied to the img and not to img:hover. But I get no effect when I apply CSS to .popular-posts img.

    Has anyone produced transitions for WPP thumbnails, and can you provide your CSS here?

    Thanks!

    • This topic was modified 9 years, 8 months ago by bobjones.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    9 years, 8 months ago

    Hi there!

    Recently I played around a bit with CSS transitions to create a grid of post thumbnails with WPP. I didn’t apply the transition to the image itself but to another “sibling” element to create an “overlay” effect.

    Not sure if it’ll help but here’s the link to the tutorial just in case you might want to take a look: How to display a grid of Popular Posts in WordPress.

    Hope it helps!

    • This reply was modified 9 years, 8 months ago by Hector Cabrera. Reason: Added anchor to link directly to the CSS bit of the tutorial
    Thread Starter bobjones

    (@bobjones)

    9 years, 8 months ago

    Hector, I can see this creates an effect where the title floats into place from the top of the image, but otherwise doesn’t affect the image.

    I’ll work with it a bit and see what I can come up with.

    Plugin Author Hector Cabrera

    (@hcabrera)

    9 years, 8 months ago

    Indeed, in that tutorial the image is left untouched. However, the principle is the same. I believe you can adapt it to fit your needs (and if in doubt, feel free to ask any questions either here or at the article).

    I have one small request, hope it’s not too much trouble: I’d love to see what the end result is so please consider sharing your grid / slider / whatever you’re working on here. I’m sure other users will appreciate it as well.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Applying transition effects to thumbails’ is closed to new replies.