I have an image on my website. When I hover over it I want it to do a 360 spin animation.
I'm currently doing so in CSS:-
.img-responsive:hover {
transition-duration: 2s;
transform:rotate(360deg);
}
However, when the user hovers at the edge of the image, the image rotates and is no longer being hovered over at the edge causing the image to "spasm".
How can I achieve a proper looking and stable rotation? JavaScript would work too.
You can fix it by adding small delay to your transition
Working Demo
.img-responsive:hover {
transition-duration: 2s;
transform:rotate(360deg);
transition-delay: 0.5s;
}
Update:
If you can use animation, You can do this
Updated Demo
.img-responsive {
animation: rotateme;
}
.img-responsive:hover {
animation: rotateme 5s;
}
You can make the image bigger when hovered, so that it's difficult that the user accidentally unhovers
if there is no padding or margin, set
.img-responsive:hover {
transition-duration: 2s;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
padding: 50px;
margin: -50px;
}
Increasing the padding to 50px makes sure that the mouse is still on it. Changing the margin in the same amount, but in opposite sense makes it stay at the same location.
fiddle
Related
I want my CSS div to be completely invisible when page opens but after 2s appear on screen.
I tried setting opacity: 0; and then transition: opacity 100 2s; but it didn't work. I don't want CTA for example for it to happen after they hover or something but instead I want it to happen even if the user doesn't move the mouse. Please help!
You can use CSS animation to make it. Like this-
HTML-
<div class="div"></div>
And CSS-
<style>
.div{
width:100px;
height:100px;
background:red;
animation-name:opacity;
animation-duration:4s;
}
#keyframes opacity{
0%{opacity:0;}
100%{opacity:1;}
}
</style>
U can simply use CSS animations instead of transition.
consider HTML code having single div element
<div id="main"></div>
now to apply CSS animation we do something like this,
#main{
...add your desired code for styling the div...
animation-name:onload;
animation-duration: 1s;
animation-delay: 2s; //this is the key line, what this means is the animation would start after 2s of delay.
}
// Now creating animation
#keyframes onload{
0%{
opacity:0;
}
100%{
opacity: 1;
}
}
I have blog post with set of images that are enlarged on hover. My problem is that when i enlarge element and it overlaps with other image that is later in page render order then the next image is on top of the enlarged one.
The easy way to stop this is to give some kind of z-index on :hover pseudo selector. But then i have very pesky problem when just after I stop hovering my image then next one is on top of it for fraction of second.
You can see behaviour in this imgur album or on jsfiddle(hover first image)
In short i have following css for hovering effect:
.photo-exp
{
position: relative;
transition: all .4s ease-in-out;
/* some properties deleted which have no connection to hovering effect */
}
.photo-exp:hover
{
transform: scale(1.7);
z-index : 10;
}
It would be very easy to have same effect with javascript and setTimeout function.
But i would like to avoid javascript solution and have some CSS workaround which will change slowly z-index in time after hovering ends.
I tried CSS transition but it is not working
I tried to eddit this snippet but i could not get it working in the way that i wanted.
You need to assign a new transition-delay property, and remove it as soon as the hover begins. That way the z-index can persist for some time even after the mouse is gone. It's a little counter-intuitive; I would expect that the delay should be added on hover and removed off-hover but the opposite works on chrome:
.expander {
position: absolute;
left: 50%; top: 50%;
width: 100px; height: 100px;
margin-top: -50px; margin-left: -50px;
z-index: 1;
transition: transform 400ms 0ms, z-index 0ms 400ms; /* That final "400ms" delays the z-index transition! */
}
.expander:hover {
transform: scale(1.8);
z-index: 2; /* A hovered expander is always on top */
transition: transform 400ms 0ms, z-index 0ms 0ms; /* Remove the z-index transition delay on hover. This is counter-intuitive but works. */
}
.expander:nth-child(1) {
margin-left: -105px;
background-color: #a00000;
}
.expander:nth-child(2) {
margin-left: 5px;
background-color: #00af00;
}
<div class="expander"></div>
<div class="expander"></div>
Note that (unless you try to mouse around really quickly in order to break it) neither square bleeds through the other, not even for a frame, when they expand.
I've also finally managed to solve by myself my problem.
It's more intuitive than #Gershom Maes answer in my opinion.
Fiddle
I have used animation system to achieve the result.
#keyframes nohovering {
0% { z-index: 9; }
100% { z-index: 1; }
}
#keyframes hovering {
0% { z-index: 10; }
100% { z-index: 10; }
}
First one will be by default fired on selector without :hover like this
animation: nohovering 0.9s;
It will guarantee that after i complete my hovering it will go smoothly down from z-index 9 to z-index 1. After hovering my image will be on top of other images. When i tested it for z-index 10 for 0% i had a little glitch when i tried to hovered 2 images at same time and then hover only 1 of them.
For my hovering selector I used:
animation: hovering 0.1s infinite;
It will just loop my image on z-index 10. On hover it will always be on top of the other images. Short animation time guarantee that it will go off after hovering stopped in maximum time of 0.1s.
After deleting normal static z-indexes it works.
I am applying 2 CSS3 transitions to a image. Everything works fine. Only issue. The image wobbles while upscaling. Is there any way to smoothen this out?
DEMO
CSS
div{
width:199px;
height:253;
margin-left:50px;
margin-top:50px;
}
div:hover
{ -webkit-transform: scale(1.2);
-webkit-filter: hue-rotate(180deg);
-webkit-transition:all 2s linear;
}
EDIT: Somehow I notice that the issue is not with the upscale property. If you remove the hue-roate property the images upscales without any jitter. However I need both the effects in my animation.
I placed the transition on the img and transitioned the width instead of scale and it seemed to fix the wobble
FIDDLE
div{
margin-left:50px;
margin-top:50px;
}
img
{
width:199px;
}
img:hover
{ width: 238px;
-webkit-filter: hue-rotate(180deg);
-webkit-transition:all 2s linear;
}
The problem is that the image is being scaled up along different axes at different times because it is not a square image and the floating-point dimensions are being truncated to integers.
The only fix that exists is to artificially make the image element square so that the two dimensions of the image are scaled up in sync, which will eliminate the perceived jitter.
Though, if I could get away with it, I probably just reduce the transition time so that the jitter is not as noticeable.
So I want to make a pop-up book effect but in 2D only. (so NOT like the beercamp page).
Ideal results:
bottom of img stays in the same position
img starts invisible then is popped up (imagine it lying on its back, then being lifted up till it is vertical)
Item should not appear too (if possible) compressed
I've read into CSS animations, the closest animation I can find is
transform: rotateX(xdeg);
So I produced this to test it out:
<!doctype html>
<style type="text/css">
#popup
{
transform: rotateX(90deg);
animation-delay: 2s;
animation-duration: 3s;
animation-name: popupanim;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes popupanim
{
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
</style>
<body>
<img id="popup" src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width=379px height=400px/>
</body>
The problem with this is that the bottom level of the image changes, and that the image is obviously compressed.
How could I improve this to meet my needs?
(also as a side not rotate3d(xdeg, ydeg, zdeg) does not produce any output, why?)
Add a container element and use the transform-origin property to make it pivot properly:
#container {
display: inline-block;
perspective: 600px; /* Tweak this */
}
#popup {
transform: rotateX(90deg);
transform-origin: bottom;
}
Demo: http://jsfiddle.net/BEy9f/3/
You need to use a parent element (#container) to make the perspective work properly. Also, if the #popup isn't in the exact center of the element (which is why I put display: inline-block in there), it'll appear off-center in the animation.
Chrome supports 3D transformations as well, so you can add support by using the -webkit- prefix.
I need to change the background-color from red to transparent.
This change should occur when I hover over a div.
The reason is why I need it transparent is so I can show an absolute positioned div under the main div, in other words, when I hover over the parent div, I need to show the child div.
When I move away the cursor from this div, I don't want a reverse-transition, I want the background to stay transparent, I want the blue div to always be there after I move away the cursor.
Since I need a PURE CSS solution (No JS/JQuery), I came into the CSS3 Transition.
<div id="parent">
<div id="child">
</div>
</div>
This is a fiddle (Firefox).
#parent
{
background:red;
-moz-transition:background 1s;
}
#parent:hover
{
background:transparent;
}
I thought about doing this with animation, since I can fake this by giving it a temporary duration to stay transparent, for example.
0% {background:red;}
1% {background:transparent;}
100% {background:transparent;}
But then animation will stop when I move the cursor away.
Note: This may sound ridiculous or stupid, but my intention is bigger than this, this is just one small example.
Take a look at the transition-delay property.
#parent { transition-delay:999999s; }
#parent:hover { transition-delay:0s; }
Fiddle
This way, the hover animation will happen instantly (0s) while the transition to the initial state will only happen after 277 hours without leaving the page. You can increase the value a bit further if necessary, though I believe this value is enough for a real world page. =]
I don't think it's possible with pure CSS. As a compromise you can use JavaScript to add a class to the element and then handle all visuals with CSS.
http://jsfiddle.net/ZvcgP/1/
HTML
<div class="effect">Hover me</div>
CSS
.effect {
background-color: red;
-webkit-transition:background 1s;
transition:background 1s;
}
.effect.anim-done {
background-color: transparent;
}
JS
$('.effect').mouseenter(function () {
$(this).addClass('anim-done');
});
use below code to transiton from red to transparent. and please change 'object' to the class of your object
.object {
background-color: red;
-webkit-transition:background-color 1s linear; /* for webkit supported browsers */
-moz-transition:background-color 1s linear; /* for old mozilla browsers */
-o-transition:background-color 1s linear; /* for opera browsers */
transition:background-color 1s linear; /* for css3 supported browsers */
}
.object:hover {
background-color: transparent;
}