I want whenever I scale - adjacent elements to move accordingly. How can I do that? Whenever I do scale it goes on top of adjacent element.
jsbin
In opposite to that if I change width value it works as I wanted, yet I can't use width in transitions.
HTML:
<input>
<div class="foo">
CSS:
input{
display: inline-block;
transition: all 1s ease;
transform-origin:left;
}
input:focus{
transform: scaleX(2)
}
.foo{
display: inline-block;
width: 200px;
height: 20px;
background-color: red;
}
Remember to set both an initial and a destination value for your transitions, like so:
input{
display: inline-block;
vertical-align: top;
transition: width 1s ease;
transform-origin:left;
width: 100px;
}
input:focus{
width: 200px
}
JSBin illustrating this here
Related
Is there a way to apply a transform: scale() to an element (or something similar, although ideally it should be able to be safely animated) which would make the element appear larger, however "ignore" the element's size (obviously this isn't exactly what I mean, keep reading).
Here is an example of what I mean.
Essentially the idea is to make the 2 differently size elements appear to scale in the same way, despite being 2 different sizes. It should be noted that the elements aren't going to be fixed width and will inherit the size of their container (whose width is also indeterminate).
Update
Thanks #TemaniAfif, the solution can be optimized further by manipulating the left and right margin instead of width.
.small {
width: 100px;
margin: 10px;
background-color: #1abc9c;
}
.large {
width: 900px;
margin: 10px;
background-color: #3498db;
}
.target {
background-color: inherit;
}
.target:hover {
margin: 0 -12px;
transform: scaleY(1.2);
transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}
<div class="small">
<div class="target">Small</div>
</div>
<div class="large">
<div class="target">Large</div>
</div>
Original Answer
The scale function resizes the element by multiplication, but you need a constant enlargement on the variant x-axis. Instead use scale, using calc on width of a proxy element (.target) to add the constant pixel when the element needs to be enlarged. By enlarging width, the position of the element also needs an offset to make it grows to left, so set the left to a negative number which is a half of the total enlargement. Since heights of the two elements are the same, using scaleY to scale them is ok.
.small {
width: 100px;
margin: 10px;
background-color: #1abc9c;
}
.large {
width: 900px;
margin: 10px;
background-color: #3498db;
}
.target {
position: relative;
left: 0;
width: 100%;
background-color: inherit;
}
.target:hover {
left: -12px;
width: calc(100% + 24px);
transform: scaleY(1.2);
transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out;
}
<div class="small">
<div class="target">Small</div>
</div>
<div class="large">
<div class="target">Large</div>
</div>
I have bottom line, on the right side there are grey div, I want on hover to show up full that div. At the beginning grey div is hidden. How could I solve this problem? Thanks!
There is fiddle link
<body>
<div id="wrap">
</div>
<div id="footer">
<div class="container">
<div id="footer_right_wrapper"></div>
</div>
</div>
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -61px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
#footer {
height: 61px;
background-color: red;
color: black;
}
.container {
height: 61px;
overflow: hidden;
}
#footer_right_wrapper {
width: 100px;
height: 217px;
background-color: grey;
float: right;
}
Use :hover selector attribute:
show/hide grey element:
Fiddle: http://jsfiddle.net/or2y2fzg/
#footer_right_wrapper {
display: none;
}
#footer:hover #footer_right_wrapper {
display: block;
}
If I understood you correctly, you want to show the grey div once you hover your cursor over the #footer?
.
Expand grey element:
If you want to expand grey element to fill #footer element: http://jsfiddle.net/r30nxzxk/
#footer_right_wrapper {
width: 100px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#footer_right_wrapper:hover {
width: 100%;
}
Note that I added CSS transition to have a smooth UX.
html:
<div id='test'><span></span></div>
CSS:
#test:hover span:before{content:'I want this to make the div expand in ease'}
#test, #test span:before, #test span{-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;transition: all 0.2s ease-in}
I'm wondering if this can be achieved my CSS only: when mouseover #test, some text should be added into span, and the outer div should be expanded smoothly in ease.
The above HTML+CSS doesn't work, the DIV would expand immediately.
Here's one way to do it: http://jsfiddle.net/m49tdabh/. Note: I would recommend adding content in between span tags instead of using pseudo-elements.
HTML:
<div id='test'>
<span></span>
</div>
CSS:
#test {
outline: 1px dotted gray;
}
#test span {
display: table;
}
#test span:before {
content: "Hidden message displayed on hover";
display: inline-block;
width: 0%;
overflow: hidden;
white-space: nowrap;
border: 1px solid transparent;
transition: width 0.3s linear;
}
#test:hover span:before {
width: 100%;
border-color: red;
}
The reason your transitions aren't working is because there is nothing to transition in this scenario.
Computed values don't work for CSS transitions, as a transition needs both an initial and a destination state. So something like
#test span:before {
content: '';
max-height: 0;
max-width: 0;
overflow: hidden;
display: inline-block; }
#test:hover span:before {
content: 'I want this to make the div expand in ease';
max-height: 500px;
max-width: 500px;
transition: all 0.2s ease-in;
}
will work as the max height provides both an initial and destination value. That is what becomes animated in this scenario, not the simple adding of content as the CSS is agnostic of what content in present in the element – despite what you might think from seeing the content attribute in use for pseudo elements.
At the moment i am working on a header with a slider animation (css3 only):
http://jimmytenbrink.nl/slider/
Everything is working fine except sometimes the slider is bugging if you go from the center to the right. It seems that i need to stop the animation for a few miliseconds to complete. However i searched everywhere on the internet but i cant seem to get it to work.
Anyone here has experience with it who can help me out?
HTML
<header>
<div><span>slide 1</span></div>
<div><span>slide 2</span></div>
<div><span>slide 3</span></div>
<div><span>slide 4</span></div>
<div><span>slide 5</span></div>
<div><span>slide 6</span></div>
<div><span>slide 7</span></div>
<div><span>slide 8</span></div>
</header>
CSS
header {
margin-top: 10px;
width: 800px;
overflow: hidden;
height: 500px;
}
header div {
background-color: #000;
width: 43.8px;
height: 200px;
position: relative;
float: left;
-webkit-transition: width .3s;
transition: width .3s;
overflow: hidden;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
margin-right: 2px;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child {
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header div img {
position: relative;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -350px;
opacity: 0;
width: 450px;
font-family:'Fugaz One', cursive;
text-transform: uppercase;
font-size: 24px;
color: #fff;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header:hover > div {
width: 43.8px;
}
header:hover > div:hover {
width: 150px;
}
Here is a JSFiddle
So the question is, how can i set a stop on the animation for a few miliseconds so the animation can finish before it gets triggered again?
Hope my question is clear!
(thanks for the edit)
One might call my answer a workaround. Maybe it is but according to my comment on ExtPro's answer - it is still completely pure CSS.
I decided to use display: table-cell since the table cell's width is distributed equally.
So, the CSS might look like this:
HINT: This is only a bunch of necessary CSS. All the code is in the jsFiddle
header {
width: 368px;
display: table;
overflow: hidden;
}
header > div {
width: 44px;
height: 200px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
overflow: hidden;
}
header > div:hover {
width: 151px;
}
Fiddle
As you can see, we don't have to determine the width of all not-hovered divs. Actually, the problem came from that very CSS rule:
/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
width: 43.8px;
}
You were changing the width of the divs on header:hover, so when the transition didn't manage to do its job in time, you came out with mouse pointing to the header but to non of the divs.
If I understand what you mean by 'bugging', what is happening is if you move the mouse quickly to the right, it traverses the currently open div and is left in an area which when that div collapses, does not contain (e.g. the mouse is not hovered over) the next one in order to expand it- namely the hover event of the following div(s) is/are not firing thus they do not expand. There wont be a CSS fix for this Im afraid as its browser related, you may want to replace with jQuery/JS.
I have divs that grow heightwise on hover and on hover I want them overlap all other divs, and not push them like in my example.
#container{
width: 300px;
}
#container a div{
float:left;
width: 100px;
height: 60px;
-webkit-transition: all 0.25s ease;
}
#container .color1{
background: #444;
}
#container .color2{
background: #555;
}
#container .color3{
background: #666;
}
#container .color4{
background: #777;
}
#container .color5{
background: #888;
}
#container a div:hover{
height: 80px;
-webkit-transition: all 0.25s ease;
}
http://jsfiddle.net/MrSlacker/5wa3X/
You can make some divs that act like rows for each three divs and set it with position:absolute and z-index.
Check this link http://jsfiddle.net/5wa3X/5/
If they're all going to have fixed dimensions like in your example, position them all absolutely inside a container with position relative; this takes them out of the flow and they won't push any other content.
Well the obvious answer would be for you to use position: absolute for the container, and then position: relative with each one of those divs, so they don't affect each other's positions with the box-model. But that would mean for you to manually position them (each one) so they look like they're stacked...
But maybe there's a way around it using z-index. It would make sense that by sending the container to a lower z-index and allowing overflow, that the children would somehow "hold their ground"... but a quick experiment lead me nowhere. Will try to play with it more later :)
You should use position: absolute with some positioning classes.
http://jsfiddle.net/5wa3X/6/
and I play with Ricardo code..
use
.container div:hover {
height: 80px;
z-index:10000;
background-color:#ff0000
}
your issue get solved..
Credit goes to "RICARDO"
#container{
width: 300px;
}
#container a div{
float:left;
width: 100px;
height: 60px;
-webkit-transition: all 0.25s ease;
}
#container .color1{
background: #444;
}
#container .color2{
background: #555;
}
#container .color3{
background: #666;
}
#container .color4{
background: #777;
}
#container .color5{
background: #888;
}
#container a div:hover{
/*height: 80px;*/ /*No need to specify width in hover*/
-webkit-transition: all 0.25s ease;
}