Responsive Hover Effects

[Jagst3r15]

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.

[Paulie_D]

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

Because I think adaptive is what you are after.

[Jagst3r15]

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 ;)

[budha210]

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

[Merri]

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.

[Jagst3r15]

@Merri you are wise :)

Thank you.

[Author]

Posts