Keeping the height of the image while changing the height of the absolute container
Hello everyone,
It will actually look like the before and after image (when hovering), but I want it to vertically and from top to bottom. Meanwhile, I want the image not to shrink.
As you can see in the attached image, the color image and the black and white image are not aligned. I am sharing the code below, I use it with Swiper JS.
Code : https://codepen.io/yekowele/pen/MWZmVJR
5 Replies
I think it's better to use clip-path
better effect
https://codepen.io/ThatMartianDev/pen/vYvmzjv
here check it out
I commented where I added the clip-path
I tried using clip-path, but I need to animate without losing the border at the top.
https://twitter.com/doganuraldesign/status/1701531737518485787
You can see the animation preview at this link
Dogan Ural (@doganuraldesign)
Devs! I need your help!
We are trying to create a simple reveal animation in the background of a website's hero.
How can we do this in the simplest way?
Twitter
Guys solved,
Thanks to @therealmarsman and X community friends.
Solution: Using clip-path, but remove Remove the border top and create the border with a separate div instead and add bottom:100% attr. and same transition values too.
Codepen : https://codepen.io/yekowele/pen/rNomqyK
nice <a:CH_Clap:715599170685108336>
I was just trying with ::before
but with a seperate div is better