1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Zoom breaks proportional...

Discussion in 'HTML & Website Design' started by mihaiDooH89, Dec 21, 2016.

0
  1. #1 
    <!DOCTYPE html> <html > <head> <style type="text/css"> .frame { height: 200px; width: 200px; overflow: hidden; } .zoomin img { height: 200px; width: 200px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .zoomin img:hover { width: 300px; height: 300px; } </style> </head> <body> <div class="zoomin frame"> <img src="img/zimage.png" title="Scale on Hover with Transition using CSS" /> </div> </body> </html>
    Code (markup):
    - See more at: http://www.corelangs.com/css/box/zoom.html#sthash.pXDIoCho.dpuf
    Code (markup):

    Hi i need help with this ... seems like when it zoom is not proportional! why? can somebody help me.!
     
    Last edited by a moderator: Dec 21, 2016
    mihaiDooH89, Dec 21, 2016 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #3
    Because you've set the image both width and height.
    If you want it to be proportional, you need to let go; either its width or height.
    Example:
    .zoomin img{
    width: 100%; /*relatively to parent .frame*/
    height: auto; /*allow it to adjust by itself*/
    transition: all 2s ease;
}
    Code (CSS):
     
    hdewantara, Dec 21, 2016 IP
    deathshadow likes this.