Grow your CSS skills. Land your dream job.

Responsive Hover Effects

  • # March 20, 2013 at 10:49 am

    Hi,

    I am trying to make this http://codepen.io/SeamlessThemes/pen/LiBdo responsive. It is based off of a demo that I found here http://tympanus.net/Tutorials/OriginalHoverEffects/index5.html. With a fixed width and height the .view and the .view .mask are the same, but when I add percentages in I get lost because you cannot just have something like 32.33% for both.

    Any ideas?

    Thank you.

    # March 20, 2013 at 11:24 am

    Here’s my question…do you really want this to be responsive…or adaptive?

    Because I think adaptive is what you are after.

    # March 20, 2013 at 11:27 am

    So you recommend adaptive? I was leaning toward that, but sometimes after working on something for a while you think “Ok, this can’t be that hard,” hence me asking here ;)

    # March 20, 2013 at 11:42 am

    I would suggest just having them stack, rather than respond width wise. Is that your plan?

    # March 20, 2013 at 11:59 am

    Forked it: http://codepen.io/Merri/pen/xyBtr

    Instead of `transform: translateX()` you can use other means of moving things around. In the changed source I used `right` and `margin-left` to do the trick.

    # March 20, 2013 at 12:21 pm

    @Merri you are wise :)

    Thank you.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".