Snack - How to create a slide reveal image in
In this video, we're gonna see how to create a slide reveal image in Webflow
The recipe 🥪 :
- Insert a div block .hero with 100vw & 100vh
- Align center and justify center
- Add inside the div .wrapper-img
- 40em width and 50em height
- Overflow hidden
- Put it in relative
- Add inside Image
- 100% width and 100% height
- Put it in cover
- Add inside .wrapper-img a div called .slide
- 51% width & 100% Height
- Add a background color white
- Add class .left
- Duplicate element
- Delete .left and add .right and change absolut position alignment to right
- Create loading animation
- .slide.left = 0% x at 0% and -100% at 100%
- .slide.right = 0% x at 0% and 100% at 100%
- 1.8 duration and in/out quart curve
Et voilà !
===
Le studio
👉 https://www.tambien.studio/
✌️ [email protected]
===
📢. Twitter: / tambien_studio
🗣️. Linkedin: https://bit.ly/3Kbbxa6
===
#webdesign #freelancer #webdevelopment #webflow #productdesign #adobexd