Menu
So I have an object inside a div container. The object has the max-width (600px) and max-height (400px) properties set. When I hover the object, the properties are set to none so the object's width and height can be rendered properly. However when moving the mouse out of the object it immediatly changes it's width and height to the max-width (600px) and max-height (400px) values and after one second it falls back to it's original width and height values.
So how can I do the transitions to make the object change it's width and height smoothly, both, when hovering over it and when mousing out.
HTML:
<html>
<!-- Blah blah some head tags here. -->
<body>
<div id="c_a">
<object data="https://www.google.ro/images/srpr/logo11w.png" type="image/png"></object>
</div>
</body>
</html>
CSS:
html{
font-size: larger;
width: 100%;
height: 100%;
}
#c_a object{
transition: width 1s linear .5s, height 1s linear .5s;
-webkit-transition: width 1s linear .5s, height 1s linear .5s;
-o-transition: width 1s linear .5s, height 1s linear .5s;
-moz-transition: width 1s linear .5s, height 1s linear .5s;
position: relative;
width: 100%;
height: 100%;
max-width: 600px;
max-height: 400px;
vertical-align: text-top;
}
#c_a object:hover{
width: 200%;
height: 200%;
max-width: none;
max-height: none;
}
Fiddle
742
The problem is that you do not have width specified on the parent element.
You have percent widths on your object as 100%. 100% of what? It is the 100% percent of the parent element's width, your div in this case. If the parent element doesn't have the width specified, then you end up with such problem(s).
Solution: Specify a width on your wrapper div.
Demo: http://jsfiddle.net/abhitalks/Pv4y4/4/
CSS:
div#c_a { width: 200px; } /* specify width on parent here */
#c_a object {
-webkit-transition: width 1s linear .5s, height 1s linear .5s;
width: 100%;
height: 100%;
...
}
#c_a object:hover {
width: 200%;
height: 200%;
max-width: none;
max-height: none;
}
Note: Ideally you would also specify height on the parent.
As long as the specified width on the parent div is within the rules of max-width it will work fine. However, once the initial width breaches or nears the max-width rule, then the transition will take it beyond the max-width and then will snap back to the original.
Problem: Specifying the transition separately on width and height will not work as it tries to transition on those properties only and thus max-es are ignored. Hence the jumping effect.
Solution: First, Do not specify the max-es as none. Because you are increasing the image size by 200%, specify these also as 200%. Second, specify transition as-is without specific properties. This makes all the relevant properties get transitioned and will help mitigate the problem to some extent.
Demo 2: http://jsfiddle.net/abhitalks/Pv4y4/9/
CSS:
html, body { width: 100%; }
div#c_a { width: 60%; }
#c_a object {
-webkit-transition: 1s;
...
}
#c_a object:hover {
width: 200%;
height: 200%;
max-width: 200%;
max-height: 200%;
}
Hope that helps.
188
If you want to change max-width/max-height smoothly, you must specify the max-* in the minimized state and set width/height to auto:
#c_a object{ {
width: auto;
height: auto;
max-width: 120px;
max-height: 40px;
display: block;
transition-duration: 200ms;
transition-delay: 1ms;
transition: position 1s, left 1s, top 1s, width 1s, height 1s, max-width 1s, max-height 1s;
transition-timing-function: ease;
}
#c_a object:hover {
position: absolute;
display: block;
top: 100px !important;
left: 0px !important;
width: auto;
height: auto;
max-width: 500px;
max-height: 200px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
