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
No description
5 Replies
~MARSMAN~
~MARSMAN~14mo ago
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
Yek
Yek14mo ago
I tried using clip-path, but I need to animate without losing the border at the top.
Yek
Yek14mo ago
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
Yek
Yek14mo ago
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
~MARSMAN~
~MARSMAN~14mo ago
nice <a:CH_Clap:715599170685108336> I was just trying with ::before but with a seperate div is better
Want results from more Discord servers?
Add your server