- From: François REMY <fremycompany_pub@yahoo.fr>
- Date: Tue, 23 Nov 2010 11:50:09 +0100
- 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 UTC