W3C home > Mailing lists > Public > www-style@w3.org > November 2010

Re: Stretching element without stretching text

From: François REMY <fremycompany_pub@yahoo.fr>
Date: Tue, 23 Nov 2010 11:50:09 +0100
Message-ID: <4AC22AE7321940C99C460026BADAB808@FREMYD2>
To: "Jaikishan Jalan" <jai.ism@gmail.com>, <www-style@w3.org>
If you only want to make an element bigger, you should use “position: 
relative” and modify the margins to be negative.
It works in CSS 2.1 and don't use the non-widely implemented 
to-be-standardized CSS3 transform property.

<!doctype html>
<html>
    <head>
        <title>Sample</title>
        <style>
            * {
                font-family: Calibri, sans-serif;
                cursor: default;
            }

            .sample {
                display: inline-block; width: 100px; height: 100px; 
overflow: hidden;
                position: relative; vertical-align: middle; padding: 7px;
                background: green;  color: white;
            }

            .sample:hover {
                margin: -50px;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div style="background: lime; padding: 10px;">
            I'm a DIV.<br/>
            I'm a DIV.<br/>
            I'm a DIV.<br/>
            I'm a DIV. <div class="sample">
                I'm a DIV. I'm a DIV. I'm a DIV. I'm a DIV. I'm a DIV. I'm a 
DIV. I'm a DIV. I'm a DIV.
                I'm a DIV. I'm a DIV. I'm a DIV. I'm a DIV. I'm a DIV. I'm a 
DIV. I'm a DIV. I'm a DIV.
            </div> I'm a DIV.<br/>
            I'm a DIV.<br/>
            I'm a DIV.<br/>
            I'm a DIV.<br/>
        </div>
    </body>
</html> 
Received on Tuesday, 23 November 2010 10:50:36 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:34 GMT