I'm trying to copy the animation shown in this video but I can't get it to work - https://www.youtube.com/watch?v=aCWeVAu0v2U
I feel like I've tried everything to make it work but nothing I do works.
My code:
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
* {
box-sizing: border-box;
}
html, body {
margin: 0;
}
.item {
width: 300px;
}
.item:hover {
transition: width 0.5s cubic-bezier(.87,-1.38,.03,1.54);
}
you can put the transition in the initial state of your .item like that :
.item {
width: 300px;
transition: width 0.5s cubic-bezier(.87,-1.38,.03,1.54);
}
.item:hover {
width: 500px;
}
if the transition is in the :hover, it will only apply when the element is hovered over, so there will be no transition animation
took the 500px from the video btw