Grow your CSS skills. Land your dream job.

on hover change width

  • # January 19, 2013 at 11:11 pm

    hey guys please check this site http://testz.salamandra-review.com/
    When is loaded please hover on any post and you’ll see that the width changes but it pushes all other posts.

    I don’t want it like that. I want the post to go over other posts on hover, not to push them.

    How can I do that.

    Thank you for your time my friends!

    # January 19, 2013 at 11:50 pm

    I think you should replace that method for showing the ingredients. Its not convenient because you can navigate freely back and forth. And the last thumbnail has problems with :hover.

    # January 20, 2013 at 2:41 am

    @bondigor69, I got a basic idea going for you by putting a negative left margin on the hovered div

    http://codepen.io/ChrisPlz/pen/zitcG

    # January 20, 2013 at 4:27 pm

    @ChrisP thank you it works now

    # January 20, 2013 at 5:09 pm

    Hey @ChrisP there is still a smal problem when you hover on the first post of 2nd row????
    How can I fix that

    # January 20, 2013 at 5:16 pm

    @bondigor69, it’s because of the transition, just remove that

    # January 20, 2013 at 5:44 pm

    You can solve the problem by putting each item in a container, having it be relatively positioned with a width of the default view. Then have an inner container which you manipulate the width of that’s positioned absolutely. Then your layout won’t change as what’s “changing” is a container that doesn’t effect layout.

    It’s extra markup but it will achieve what you want.

    # February 19, 2013 at 4:17 am

    @dougoftheabaci is right. You could try that. Use jQuery instead of CSS when animating on hover.

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

You must be logged in to reply to this topic.

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