I have a div and im trying to scale it(just the Y) on hover.The problem is that it works well without transition.When i use transition,the div scales at top a bit and then goes down,check the fiddle.The question is how to prevent div from scalling like that?I want it to scale straight down,without this bouncing to top.
http://jsfiddle.net/q9akawr6/21/
HTML
<div></div>
CSS
div{
width:100px;
height:100px;
margin:100px;
background-color:red;
transition:.2s;
}
div:hover
{
transition:.2s;
transform-origin:top;
transform:scaleY(2.0);
}
As Niet says, or just put this in the div{} rule, rather than div:hover{}:
transition:.2s;
transform-origin:top;
for the same reason (to avoid a transition on transform-origin at the wrong time).
the div bouncing due to you margin area. I try to change your code. check the following
HTML:
<div class="container">
<div class="demo"></div>
</div>
CSS:
div.container
{
width:300px;
height:300px;
border:1px solid gray;
}
div.demo{
width:100px;
height:50px;
margin: 100px auto;
background-color:red;
transition:.2s;
transform-origin: left top;
}
div.demo:hover
{
transition:all .2s linear;
transform-origin: top;
transform:scaleY(2.0);
}
Related
How can I make a div that has vertical align:top, change it's position to vertical-align: middle, but have a smooth animated transition through those states?
I can't get it to work, is vertical-align non transitionable?
Code:
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
vertical-align:bottom;
display:table-cell;
transition:all 2s;
}
.inner:hover{
vertical-align:middle;
}
Here's the fiddle: https://jsfiddle.net/7amp783t/
Instead of changing the vertical-align property, use transform: translateY() to move up and down.
I've had a fiddle and got this code to work:
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
display:table-cell;
vertical-align: bottom;
transition: all 2s ease-in-out;
}
.inner:hover{
transform: translateY(-50%);
}
The translateY(-50%) moves the text "up" (hence the -) by 50% of the height of its parent box.
EDIT You don't need to worry about setting the position: relative of the parent div. I've removed it for clarity.
I've updated your JSFiddle, also.
if you want to use vertical-align, you should not use inside a table-cell but with 2 elements side by side, where you can set values around the line-height they produce. In this case, vertical-align can take lots predefined values or numerics values.
https://www.w3.org/wiki/CSS/Properties/vertical-align#Values
Because your example gives an height of 200px, we may play around this : https://jsfiddle.net/7amp783t/5/
.outer{
font-size:18px;/* whatever */
width:200px;
height:200px;
background:red;
text-align:center;
}
.outer:before {
content:'';
display:inline-block;
height:100%;/* here the line is 100% height of container: set to 200px */
vertical-align:calc(-200px + 1em); /*chrome instead bottom */
}
.inner{
vertical-align:0;/* from bottom : calc(-200px + 2em) go all the way down minus room for text */;
display:inline-block;
transition:all 2s;
}
.outer:hover .inner{/* outer, else you need to follow inner */
vertical-align:calc(-100px + 1em);/* lets go half way */
}
<div class="outer">
<div class="inner">
Hover me box
</div>
</div>
CSS Transitions defines vertical-align as animatable, but only when interpolating between two length values.
┌────────────────┬───────────┐
│ Property Name │ Type │
├────────────────┼───────────┤
│ vertical-align │ as length │
└────────────────┴───────────┘
Therefore, transitions between bottom and middle won't be smooth.
If you were using vertical-align to align an inline-level element relatively to its line box, you could try using length values.
However, you are using it on a table cell, which has a different behavior, as defined in Table height algorithms. In particular, length values don't apply to table cells.
I think you have to use Jquery to create a sliding animation. You can use jQuery's toogle function to do so.
http://api.jquery.com/toggle/
http://api.jquery.com/slidetoggle/
Try transform instead of vertical aligning it to middle. This code will do same what you are trying to accomplish. Change your hover state to include translateY(-50%)
Working Demo
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
vertical-align:bottom;
display:table-cell;
transition:all 2s;
}
.inner:hover{
transform: translateY(-50%);
}
u can try this sample:
using the transform: translateY(-50%); method
css vertical align animation
.block {
background: orange;
height: 500px;
}
.centered {
text-align: center;
background: pink;
position: relative;
top: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.block:hover .centered {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
}
let me know if u need further help
position:relative can be an easy way:
.outer {
width: 200px;
height: 200px;
background: red;
display: table;
text-align: center;
}
.inner {
position: relative;
top: 0;
display: table-cell;
transition: all 2s;
}
.inner:hover {
top: 50%;
}
<div class="outer">
<div class="inner">
Hover me
</div>
</div>
I have a container div with several smaller div:s inside, all of them with float:left;. If I hover one of the smaller div:s the height and width should be increased and it should overlay the other div:s without moving them.
HTML:
<div id="boxcontainer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
.box {
float:left;
position: relative;
width:150px;
height:150px;
margin:5px;
background-color: yellow;
}
#boxcontainer {
position: relative;
width:500px;
height:auto;
}
.box:hover {
z-index:100;
width:300px;
height:auto;
}
How can I achieve this?
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Instead of float left try position absolute.
I have added a container around each box and positioned each element absolutely within it. This way you can add as many boxes as you wish and keep the same class.
EXAMPLE
HTML
<div id="boxcontainer">
<div class="box">
<div class="Inside"></div>
</div>
<div class="box">
<div class="Inside"></div>
</div>
<div class="box">
<div class="Inside"></div>
</div>
</div>
CSS
#boxcontainer{
position: relative;
width:500px;
height:500px;
}
.box{
position:relative;
float:left;
width:150px;
height:150px;
margin:5px;
}
.Inside{
background:green;
position:absolute;
top:0;
left:0;
width:150px;
height:150px;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
.Inside:hover{
z-index:100;
width:250px;
height:250px;
background:#666666;
}
http://jsfiddle.net/JJ3v4/3/
Live Demo: http://jsfiddle.net/hKL4f/1/
I think the easiest way to do what you want would be to use a CSS transform.
.box:hover {
transform: scale(2, 2);
}
That way you alter the dimensions of the element on hover without affecting any of the other elements in the document flow around it.
If you want the boxes to expand in a different way (ie, to the right and bottom rather than in all directions) you can set a transform-origin property (default is 50% 50%).
Try this...works somewhat
.box{
float:left;
postion: fixed;
width:150px;
height:150px ;
margin:5px;
background-color: yellow;
}
#boxcontainer{
postion: fixed;
width:500px;
height:auto;
}
.box:hover{
z-index:1;
width:260px;
height:160px;
position:absolute;
}
I had the Same problem in my project when i hover , the box changes its width and height but it efffects the other boxes as well so to solve this problem best way is to use transform property as below
.box:hover {
transform: scale(1.2 , 1.2); // This increses the dimmensions of the box and overlay
to others boxes without disturbing others
}
Hi I am trying to rotate an image when i hover over a div using Rotate and Transform-Origin. It was works when the image is centered in the div but when i change the vertical position of the image and make the relevant changes to the Transform-origin values the image still rotates but is slightly off center. Any ideas would be appreciated.
jsfiddle here (only seems to work in firefox)
http://jsfiddle.net/boyle/U3yLk/
html
<div class="box">
<div class="c">
<img class="pic" src="p.png"/>
</div>
css
.box{
width: 200px;
height: 300px;
background-color: #4781AA;
display:block;
}
.c{
width:200px;
height:300px;
display:block;
transition: all 1s ease;
}
.c:hover{
transform: rotate(180deg);
transform-origin: 100px 150px;
}
.pic {
position: relative;
left:50px;
top: 100px;
}
This also only seems to work in Firefox!
Cheers
try this
.transform{
transform:rotate(60deg);
-ms-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
}
Ok, so in theory this should be easy, but it didn't work quite like I would have expected.
I have a list of iline-block elements and upon hovering over them, I want them to expand over nearby elements.
That part is easily accomplished by making the element be positioned absolutely and giving a margin to the next element so it doesn't move...
However, I cannot for the life of me figure out how to make it animate with the transition property.
Here's an example of what I mean:
HTML:
<div id="container">
<div class="panel">
One
</div>
<div class="panel">
Two
</div>
<div class="panel">
Three
</div>
</div>
<div class="moreContentHere">
Something something darkside.
</div>
CSS:
#container {
padding:0;
margin:0;
height:100px;
width:600px;
overflow:hidden;
}
#container .panel {
padding:0;
margin:0;
height:100px;
width:100px;
position:relative;
overflow:hidden;
display:inline-block;
border-right:1px solid red;
transition:width 300ms;
-webkit-transition:width 300ms;
transition:height 300ms;
-webkit-transition:height 300ms;
z-index:1;
}
#container .panel:hover {
position:absolute;
width:200px;
height:200px;
background-color:#eee;
z-index:2;
}
#container .panel:hover + .panel {
margin-left:100px;
}
I've created a jsfiddle for it here:
http://jsfiddle.net/yzM9q/2/
Help me Obi-Wan Kenobi, you're my only hope.
EDIT after answer: Thanks to vals below, you can view the demo of it working correctly here: http://jsfiddle.net/yzM9q/26/
You can not make transitions in wich you change not numeric properties . (For instance, changing position relative to position absolute. What is the position 50% absolute and 50% relative ?)
So, your CSS should keep the elements position as relative. Now you are taking them out of flow; you can't. So the alternative is to give the element that is being hovered a negative right margin.
CSS
#container {
padding:0;
margin:0;
height:100px;
width:600px;
}
#container .panel {
padding:0;
margin:0;
height:100px;
width:100px;
position:relative;
overflow:hidden;
display:inline-block;
border-right:1px solid red;
vertical-align: top;
transition: width 3s, height 3s, margin-right 3s;
-webkit-transition: width 3s, height 3s, margin-right 3s;
z-index:1;
}
#container .panel:hover {
width:200px;
height:200px;
background-color:#eee;
z-index:2;
margin-right: -100px;
}
demo
I have also removed the overflow hidden in the parent, just to make the height increase visible.
try this:
remove position:absolute from hovering panel and set vertical-align:top to your panels. change your transition to transition: all 0.3s.
DEMO
#container {
padding:0;
margin:0;
height:100px;
width:600px;
overflow:hidden;
}
#container .panel {
padding:0;
margin:0;
height:100px;
width:100px;
position:relative;
overflow:hidden;
display:inline-block;
vertical-align:top;
border-right:1px solid red;
transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
-webkit-transition:all 0.3s;
z-index:1;
}
#container .panel:hover {
width:200px;
height:200px;
background-color:#eee;
z-index:2;
}
#container .panel:hover + .panel {
margin-left:100px;
}
I'm using CSS transformation to rotate some elements. However, rotated elements may render partially outside its parent.
Is it possible to avoid this behavior?
To illustrate my thoughts, here is a jsfiddle that highlight this.
There is two divs :
<div id="g">
<div id="inner"></div>
</div>
and few css rules:
#g {
background:silver;
width:400px;
height:400px;
margin:100px 100px 100px 100px;
border:solid 6px green
}
#inner {
background:blue;
width:100px;
height:100px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
In fact, the blue rectangle should not render outside the gray rectangle.
Actual:
Expected:
The main idea behind this question, is to add some kind of viewport with interactivity, but never outside the viewport.
Add overflow: hidden; to #g. See this: http://jsfiddle.net/Z5TZ3/5/.
It should look like this:
#g {
background:silver;
width:400px;
height:400px;
margin:100px 100px 100px 100px;
border:solid 6px green;
overflow: hidden;
}
#inner {
background:blue;
width:100px;
height:100px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
That'll give you: