Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Nice Image Hover Effect

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #40942
    alexmccabe
    Participant

    I seen a similar effect that used jQuery and thought I would see if I could make it in CSS only.

    [So here it is](http://codepen.io/alexmccabe/pen/sfFBi “cool hover”)

    The HTML could probably be improved upon, and the CSS might be able to be condensed, but it only took me a few minutes. Hope you like it =]

    #115224
    DeTodo
    Member

    Thanks for sharing.

    Just wondered if it would be possible to reverse this effect so that the figcaption is shown first and then on hover it’s not?

    Thanks.

    #115225
    Paulie_D
    Member

    Yep, that’s easy enough.

    I was wondering if it could be done without the unsemantic span though.

    I would have thought that a lot of the styling on that could be applied to the fig caption.

    #115234
    DeTodo
    Member

    @Paulie_D How would this be done?

    Sorry I’ve had a look and I’m completely lost.

    Thanks.

    #115236
    DeTodo
    Member

    thank you @alexmccabe

    Going to try make this work on my site

    #115239
    DeTodo
    Member

    Cheers.

    I’m going to try implement it here

    http://www.detodo.co.uk

    Still trying to work out the process in my head, but I’ll most probably be taking you up on your offer for help. Very kind of you.

    Thanks.

    #115241
    Paulie_D
    Member

    Here’s where I am without the span or the extra link.

    http://codepen.io/Paulie-D/pen/teKiB

    I’m sure there is a lot that can still be done.

    #115246
    Paulie_D
    Member

    Here is the general idea but please bear in mind that improvement can always be made.

    See, you’ve wrapped in a div which isn’t really necessary as a figure is just a div with a ‘specific’ function and so acts the same.

    So, once I’ve defined the width & height I just set a positioning context (relative).

    Then, since the figcaption is inside the figure, I can apply absolute positioning (top:0) and it’s automatically aligned. Granted you have to make it the same size as the image but having set specific dimensions on the figure and overflow:hidden it won’t matter.

    Then set the opacity to ‘0’ as you did and transition that on hover.

    You can make sure that the cursor can see through the figcaption to the underlying link by using the ‘pointer-events’ property and so you don’t need to link the figcaption text at all.

    Whew.

    Is it perfect? Nope, and we’re not exactly using the figure element in the way it’s supposed to be used but you could replace the figure & figcaption with divs and it would still work..you’d just need a couple of extra classes.

    #115247
    Paulie_D
    Member

    Once more thing…I’m wondering if it wouldn’t be possible to avoid setting image sizes specifically if we could use the transition/transform:scale property.

    Hmmm.

    #115285
    DeTodo
    Member

    Thank you both. :)

    Just went through the link and it’s very well explained. Thank you so much.

    #115483
    pmac627
    Participant

    The text doesn’t center on the hover. A possible fix is to apply padding-top. The way you applied the background image prevented changing the value of top to anything other than 0.

    EDIT: Reread your post above. I guess my Firefox doesn’t respect the “old flexbox syntax” haha.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.