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.
Related
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);
}
}
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
In chrome my text appears blurry, I've tracked the issue down to my animation in my css file but I have no idea why it is causing this.
(make sure you open the image otherwise you don't see a lot of difference)
Enabled animation (blurry)
Disabling the animation (crisp)
I have tried a lot of options that I found on stack overflow but none solve my issue...
Chrome Font appears Blurry
CSS transition effect makes image blurry / moves image 1px, in Chrome?
WebKit: Blurry text with css scale + translate3d
Blurry text on Chrome when using CSS -webkit-transform
Chrome animation makes text blurry
Animation itself
#keyframes blink {
0% {
opacity: 0.2;
}
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
animation: blink 2s infinite;
Example of animation
i've solved the issue and it was because my wrapper component had position: relative; which somehow caused the rest to be blurry when the transform was applied.
Look for a parent that has the position:relative;
I have a box which flips on click. There's also an image inside that zooms on hover, shown in this fiddle.
The problem is the zoom transition on the image which is hidden is briefly displayed when I put the mouse out or back in.
My attempt to fix it:
#box.flip:hover img{
-webkit-transform: none;
}
But this one resets the image before the flip transition is done which looks ugly.
Just add z-index:
#box.flip .amount{
-webkit-transform: rotateX(0deg);
z-index:999;
}
http://jsfiddle.net/aJY34/3/