Grow your CSS skills. Land your dream job.

Resize CSS problem

  • # December 20, 2012 at 5:58 am

    Hi,

    first of all, it’s great to be here. I’m new to web design and I encountered such problem.

    http://codepen.io/ziemowit/pen/GgCjm

    I want buttons to resize downwards when hovered, but I also want the other buttons to stay at their initial positions. Shall I put each button in grids and set fixed size? Is it possible to do it in CSS? i was laso thinking of putting margin with no-hover button and delete the margin with hover one.

    Any help would be appreciated.

    whodunit

    # December 20, 2012 at 6:32 am

    Simply add `vertical-align: top` to the `#input_contact` selector and it will re-size the element from the top not the middle.

    I updated your pen that includes the above and it fixes the transition.

    http://codepen.io/ChrisUpjohn/pen/gyhIF

    # December 20, 2012 at 6:33 am

    For the button try locking it to the top of the div, so it expands downwards.

    #button:hover {position:absolute; toptop:0;}

    # December 20, 2012 at 6:37 am

    @SgtLegend Ha! That was so easy! Thank you kindly, Sir! :)

    @ danieldatton: unfortunately it doesn’t work; I tried it before asking here.

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

You must be logged in to reply to this topic.

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