Resize div around its center pivot point
I've read about jQuery scaling effect , but I can't seem to get it to work.
All I want to do is scale it down div
to 90% of its original size at the center pivot point, and also reduce its opacity to 80% when the user hovers over, then pops it back in when their mouse leaves the div.
source to share
Here's how you can do it with css
:
#yourDiv
{
width:20px;
height:20px;
opacity:1;
filter:alpha(opacity=100);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#yourDiv:hover
{
width:30px;
height:30px;
opacity:0.8;
filter:alpha(opacity=80);
}
Alternatively, you can use the function transform
:
#yourDiv
{
width:20px;
height:20px;
opacity:1;
filter:alpha(opacity=100);
-webkit-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#yourDiv:hover
{
-webkit-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
opacity:0.8;
filter:alpha(opacity=80);
}
Here's the script: https://jsfiddle.net/o3whjz33/5/
Update: As you can see, transform
more graceful. but make sure you add browser prefixes to ensure it works great for everyone.
pleeease.io/play - This site does a great job of auto-prefixing. Greetings.
Update 2: The transition property can be specified for individual properties rather than everything:
transition: opacity 0.5s ease-in-out;
transition: transform 0.2s ease-in-out;
you can read more about transform
both transition
here and here
source to share
for opacity on hover ypu can be used :hover
#toggle {
width: 100%;
height: 100px;
background: #000;
opacity:1;
}
#toggle:hover {
opacity:0.8;
}
<div id="toggle"></div>
And to shrink the width when clicked you can use javascript
$(document).click(function () {
$("#toggle").css({
"width": "90%",
"margin-left":"5%"
});
});
source to share