hi,
Is there possible to scale the width of an element from the center with CSS?
Like if I have a box that is 300px height and 100px width, and on hover I want the width to increase to 300px from the center. Possible?
hi,
Is there possible to scale the width of an element from the center with CSS?
Like if I have a box that is 300px height and 100px width, and on hover I want the width to increase to 300px from the center. Possible?
Hi,
Do you mean something like either of these examples.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test1, .test2 {
height: 300px;
width: 100px;
background: blue;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
margin:100px;
}
.test1:hover {
width:300px;
margin:100px 100px 100px 0;
}
.test2:hover {
-webkit-transform:scaleX(3);
-moz-transform:scaleX(3);
-ms-transform:scaleX(3);
transform:scaleX(3);
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test2"></div>
</body>
</html>
Thanks dude, scaleX was exactly what I was looking for=)