Can someone help me understand how, using CSS, I can rotate and change an image at the same time on hover? When a user hovers over an image I want to start the rotation and change the image during the middle of the rotation. So far I have the following but I can not figure out how to delay the image change on hover.
.image-swap {
background: url("image1.jpg") no-repeat;
border-radius: 50%;
height: 300px;
width: 300px;
-moz-transition: -moz-transform 0.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s ease-in-out;
-o-transition: -o-transform 0.8s ease-in-out;
-ms-transition: -ms-transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out;
}
.image-swap:hover {
background: url("image2.jpg") no-repeat;
cursor: pointer;
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
You really just need to add background-image to the transition rule.
In this example, I also use a container element to trigger the hover (otherwise the interactive area rotates with the image, which causes jerkiness if the cursor gets caught on, say, a moving corner).
.image-swap-container {
width: 300px;
height: 300px;
overflow: hidden;
}
.image-swap {
background-repeat: no-repeat;
background-image: url("http://placehold.it/300x300/ff0000");
border-radius: 50%;
height: 300px;
width: 300px;
transform: none;
transition: transform 1s, background-image 1s;
}
.image-swap-container:hover {
cursor: pointer;
}
.image-swap-container:hover .image-swap {
background: url("http://placehold.it/300x300/00ff00");
transform: rotateZ(360deg);
}
<div class="image-swap-container"><div class="image-swap"></div></div>
Related
Using transition and transform I am attempting to make :hover boxes that scale an image and slide up a caption.
jsFiddle
The caption container slide up and the image does scale BUT the image does NOT scale if the image-details div is rolled over, rather than the image.
How can I get around this?
The image-details div will always be visible on hover in front of the image; if the div was set to 100% width and height. The image would not scale at all.
.grid .mosa-grid .grid-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 565px;
overflow: hidden;
transition:all 0.5s ;
-webkit-transition:all 0.5s ;
-o-transition:all 0.5s ;
-moz-transition:all 0.5s
}
.grid .mosa-grid .grid-image:hover {
-webkit-transform: scale(1.2,1.2);
-webkit-transition: all 3.2s ease-in-out;
}
.grid .mosa-grid .image-details {
width: 100%;
height: 360px;
position: absolute;
bottom: -360px;
opacity: 1;
color: white;
background-color: black;
-webkit-transition: all 0.4s, -webkit-transform 0.4s;
transition: all 0.4s, transform 0.4s;
}
.grid .mosa-grid .item:hover .image-details {
bottom: 0;
-webkit-transition: all 0.4s, -webkit-transform 0.4s;
transition: all 0.4s, transform 0.4s;
width:100%;
height: 330px;
opacity:1;
}
I think the simplest thing to do is make sure your hover event is only for your container. That's what you're already doing for your captions when you have .grid .mosa-grid .item:hover .image-details.
So for your image scaling, instead of:
.grid .mosa-grid .grid-image:hover {
-webkit-transform: scale(1.2,1.2);
-webkit-transition: all 3.2s ease-in-out;
}
Just do this:
.grid .mosa-grid .item:hover .grid-image {
-webkit-transform: scale(1.2, 1.2);
-webkit-transition: all 3.2s ease-in-out;
}
Updated fiddle.
I have the following CSS:
.popup {
background-color: white;
border-style: solid;
z-index: 1001;
box-shadow: 15px 15px 10px rgba(0,0,0,.3);
border-radius: 3px;
position: absolute;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
transition: transform 1s ease;
}
.centered {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hidden {
top:100%;
visibility: hidden;
}
.visible {
top: 50%;
}
What I'm trying to do is to perform an animation bottom->top when a popup get's visible and top->bottom when it get's hidden.
Before, I was using transition: all 1s ease; and it was working, but it was laggy so I decided to use transition: transform 1s ease;. Doing this the transition is not working anymore even if I think the code should be fine. Does anyone know why and how to fix it?
Thank you.
EDIT
Here a working CodePen example:
http://codepen.io/andipavllo/pen/QyeJjq
And here is a not working example:
http://codepen.io/andipavllo/pen/KVOrgQ
They are exactly the same, except for transition: transform 1s ease; instead of `transition: all 1s ease;
In the working example you're transitioning all the properties and not only the transform property: this is important because also the top property is involved in the effect, changing from 100% to 50% (when you remove the class hidden and add the class visible).
As you can verify, if you change
transition: transform 1s ease;
into
transition: transform 1s ease, top 1s ease;
the transition works as expected.
Previously when you had transition: all 1s ease, in that translate and top values were getting animated.
But once you changed it to transition: transform 1s ease top property was left out.
.popup {
background-color: white;
border-style: solid;
z-index: 1001;
box-shadow: 15px 15px 10px rgba(0, 0, 0, .3);
border-radius: 3px;
position: absolute;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
/* edited the line below by adding top also*/
transition: transform 1s ease, top 1s ease;
}
.centered {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hidden {
top: 100%;
visibility: hidden;
}
.visible {
top: 50%;
}
Check this pen.
CSS: Modify your css to the following
.popup {
...
transition: transform 1s ease, top 1s ease;
}
And also do not use a vendor prefix if it is not necessary.
For transition only -webkit is needed. and for transform -ms and -webkit will do the job.
I have a diamond shaped div that spins 360 degrees around its own axis on hover by using CSS animation.
I can't work it out how to ensure smooth going back to the original state when not hovering anymore?
So far it "jumps" when the diamond is in the middle of its turn. I would like it to be smooth. Is it possible to do it with CSS animations? If not, maybe with JS?
.dn-diamond {
display: inline-block;
width: 100px;
height: 100px;
background: #000;
transform: rotate(-45deg);
margin: 50px;
overflow: hidden;
}
.dn-diamond:hover {
animation: spin 3s infinite linear;
}
#keyframes spin {
from { transform: rotateY(0deg) rotate(-45deg); }
to { transform: rotateY(360deg) rotate(-45deg); }
}
<div class="dn-diamond">
Here is JSFiddle
I was trying to use the transition but could not keep the original transformed shape of it (it went back to being a square, not a diamond).
You should use transitions for this. They will allow you to keep the transition smooth when the mouse moves out of the element.
Example :
.dn-diamond {
display: inline-block;
width: 100px;
height: 100px;
background: #000;
transform: rotateY(0deg) rotateZ(-45deg);
transition: transform 3s linear;
margin: 50px;
overflow: hidden;
}
.dn-diamond:hover {
transform: rotateY(360deg) rotateZ(-45deg);
}
<div class="dn-diamond">
You can also control the speed of the transition when the cursor moves out of the element by setting the transition property on normal and hover state.
Example :
.dn-diamond {
display: inline-block;
width: 100px;
height: 100px;
background: #000;
transform: rotateY(0deg) rotateZ(-45deg);
transition: transform 0.5s linear;
margin: 50px;
overflow: hidden;
}
.dn-diamond:hover {
transform: rotateY(360deg) rotateZ(-45deg);
transition: transform 3s linear;
}
<div class="dn-diamond">
Note that in the above demos the vendor prefixes aren't included. check canIuse to know which vendor prefixes you need according to the browsers you want to support.
Give transitions for transform:
-webkit-transition: -webkit-transform 3s ease-in;
-moz-transition: -moz-transform 3s ease-in;
-o-transition: -o-transform 3s ease-in;
transition: transform 3s ease-in;
Snippet:
.dn-diamond {
display: inline-block;
width: 100px;
height: 100px;
background: #000;
transform: rotateY(0deg) rotateZ(-45deg);
transition: transform 0.5s linear;
margin: 50px;
overflow: hidden;
}
.dn-diamond:hover {
transform: rotateY(360deg) rotateZ(-45deg);
-webkit-transition: -webkit-transform 3s ease-in;
-moz-transition: -moz-transform 3s ease-in;
-o-transition: -o-transform 3s ease-in;
transition: transform 3s ease-in;
}
<div class="dn-diamond">
I'm trying to make an affect on a box to drop 5px down when hovering.
It does work smoothly on Chrome but on firefox it's doesn't do the transition.
Please have a look at the next codepen using firefox and using chrome
<div class="test"></div>
.test {
background-color:blue;
width: 200px;
height: 200px;
#include transition(transform .3s 0 ease);
#include transform(translateY(0));
&:hover {
#include transform(translateY(5px));
}
}
Using Padding
Here's my preferred method using only padding:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
margin-top: 10px;
}
.transition {
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
Using Transform
Or if you still want to use transform:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10p));
-o-transform: translateY(10px);
transform: translateY(10px);
}
.transition {
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
As Kiran said already, each browser has varying support for directly using transform and transition. You can check who can use transforms here and transitions here.
Also take note that the transition wasn't applied to the :hover. It needs to be called at the base level (in this case at the div level).
Hi i guess will might help you out http://codepen.io/anon/pen/dHBni
check below css to find transitions property for different browsers
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
cursor: pointer;
}
.box:hover {
background-color: green;
}
for more information about transition http://css3.bradshawenterprises.com/transitions/
I placed two images on top of one another (one in black and white and the other in color) and created a CSS transition wherein the opacity of one image decreases while the other increases. The result is a color on hover effect.
I'm having an issue though: at some point during the transition you can see through the image a little, indicating that the transition of opacity isn't linear even though the "transition-timing-function" property is set to linear.
If there was some kind of quadratic easing involved I'd understand why this is happening, but there shouldn't be?
(the reason I'm approaching this with pure CSS is because I haven't fully tackled JQuery yet)
Any ideas on how I can better implement this functionality?
My CSS is below, or visit this JSFiddle.
#container { width: 210px; height: 150px; display:block; border: 4px solid #ccc; position:relative; overflow:hidden; margin: 10px 0 0 10px;}
.image { width: 210px; height: 150px; display:block; position:absolute; left: 0px; top:0px; }
#dbw {
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
background: url("http://oi42.tinypic.com/x0y2ky.jpg");
zoom: 1;
filter: alpha(opacity=100);
opacity: 1;
}
#dco {
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
background: url("http://oi40.tinypic.com/28gwcrb.jpg");
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
}
#container:hover #dbw {
filter: alpha(opacity=0);
opacity: 0;
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
#container:hover #dco {
filter: alpha(opacity=100);
opacity: 1;
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
The problem isn't that the transition isn't linear, it's simply that if you put two non-opaque images on top of each other, the background is always partly visible.
For example, where the transitions meat in the middle, both images are 50% opaque. The bottom image covers 50% of the background, and the top image covers 50% of the remaining 50% of the background, leaving 25% of the background shining though.
Just leave the bottom image opaque, and let the top image take over in the transition:
http://jsfiddle.net/qvcRf/4/
I.e. remove the opacity transition on the bottom image:
#container:hover #dbw {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
}