I would like to animate just an image when hovering over a card (div) and not the card itself. How would I go about doing that?
The plan is to have the image animate-bounce when hovering over the card and only the image not the card or the text inside.
Also, im using next/image for the image.
Normal CSS, I would nest the css and it would work, can that be done with TailwindCSS?
Thanks in advance
Try this, haven't tested though, but the idea is to nest the child within the parent:
.parent:hover > .child {
animation: bounce 1s infinite;
}
#keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
Related
So i made a sticky navbar to stick on top of a page, on the page i have paragraps and elements that i give css like
.from-left{
transform: translateX(-80%); } .from-right{
transform: translateX(80%); } .from-left,.from-right{
transition: opacity 500ms ease-in, transform 1000ms ease-in;
opacity: 0; } .from-left.appear,.from-right.appear{
transform: translateX(0);
opacity: 1; }
I then use intersection observer to give them appear class so that they slide in. Works fine if firefox, chrome however makes my navbar not stick to the top until all the elements slide in into their place, once they slide in navbar sticks to the top and works. I got no clue why this works in firefox and not in chrome and how to fix it, guess i could make elements positions absolute and rewrite stuff but i would like to avoid that.
I am currently building a css transition for an expandable component.
Now I add a scale(Y) transform on the element when opening (scale 0 > 1) or reverse the animation on close:
/*
* Animation: Slide In from Top
*/
.u-slide-from-top-enter-active,
.u-slide-from-top-leave-active {
transition-duration: $s-animation-duration-default;
transition-property: transform, opacity;
transform-origin: top;
overflow: hidden;
}
.u-slide-from-top-enter,
.u-slide-from-top-leave-to {
transform: scaleY(0);
opacity: 0;
}
.u-slide-from-top-enter-to,
.u-slide-from-top-leave {
transform: scaleY(1);
opacity: 1;
}
This works all great, but Now the element below in the flow in the DOM jumps from one position to the other.
I first thought I could animate the height, but this does not work, then I thought I could animate the max-height, but this would not work with a value of max-height: auto.
So my question:
If I open the the expandable, can I somehow add some transition classes to the following elements in the DOM to transition their position (although I don't set a position property explicitely.
I find some help here:
https://css-tricks.com/using-css-transitions-auto-dimensions/
But I don't want to use Javascript. If you see the javascript example you see the wanted behaviour, but I want it to make with css.
Thanks for inputs on that.
Cheers
I was creating a custom photo gallery, and suddenly faced this problem. If you create a #keyframes animation it can't be played the reverse way.
For example: You have an animation, which enlarges the square through scale(). If you hover it the square smoothly enlarges, but if you move the mouse out, your square will bounce back without animation.
Is there a way to reverse the animation on the back route? Transitions aren't working properly in my case. Thanks.
if you want to enlarge and image, you don't need to make an animation using #keyframes. you just make the image scales when hovering over it and make it scales slowly using CSS transition, for example:
img:hover {
transform: scale(2);
}
img {
transition: all 1s;
}
.image{
margin:400px;
padding-top:5px;
overflow:hidden;
transition-duration:0.9s;
transition-property:transform;
}
.image:hover{
transform:scale(2.5);
}
<img class="image" src="download.jpg" alt="a" />
I have an animation that plays when the image has the mouse hovered on it.
.zoomin img {
height: 200px;
width: 200px;
-webkit-transition: all .12s ease;
}
.zoomin img:hover {
-webkit-transform: rotate(0deg) scale(1.15) skew(0deg) translate(000px);
I have text under this image, and when the scale transform happens it blocks the text. how would I make animations trigger only when the hover animation triggers? I would like to push the text down when the animation plays
You did not post your html code, but if your text is under your <img> tag, maybe you can use '+' selector to move your text, when image is hovered
.zoomin img:hover + text {
# change properties to move your text, margin-top, transition, etc
}
or, if it will push your text down, you can increase margin-bottom of the image.
I've create a svg image, now the problem is i'm trying to animate that image with css3 animations
#keyframes animate {
from {transform: scale(1);}
to {transform: scale(10);}
}
but the image is blurring during the animation, and immediately become fine after the animation.
Is there any solution for not blur the image during the animation?
This happens with all elements regardless of whether or not they're SVG. The browser doesn't recalculate the dimensions and such until the element is done animating.
You can try forcing the GPU to render it by adding translate3d(0,0,0) or translateZ(1px), but I am unsure if this will actually help the rendering.
As such, you should set the initial value to the smaller one and animate to scale(1) instead. In your case the smaller value would be scale(.1)
You can try animating width and height instead of transform.
#keyframes zoomSize {
from { width: 30px; height: 30px; }
to {width: 300px; height: 300px; }
}
Here's a running example.