Rebuild an animation

HI everyone I want rebuild this animation

8 Replies

Pat66•6mo ago

my work https://codepen.io/alpha_66/pen/wvOMOqK?editors=1010 the problem is the animation growing div who contain the image my html code

<div class="wrapper">
                   
                         <div class="inner">
                           <img src="asset/img/villa4.jpg" alt="">
                           <h1>elevate</h1>
                           <p class="number" >1</p>
                           <div class="overlay"></div>
                         </div>
                             
                    
                    
                        <div class="inner">
                            <img src="asset/img/villa.jpg" alt="">
                            <h1>innovate</h1>
                            <p class="number" >2</p>
                            <div class="overlay"></div>
                          </div>
                              
                    
                    
                        <div class="inner">
                            <img src="asset/img/villa2.jpg" alt="">
                            <h1>reimagine</h1>
                            <p class="number">3</p>
                            <div class="overlay"></div>
                          </div>
                             
                    
                    
                        <div class="inner">
                            <img src="asset/img/villa3.jpg" alt="">
                            <h1>immerse</h1>
                            <p class="number">4</p>
                            <div class="overlay"></div>
                          </div>
                             
                    
                </div>

<div class="wrapper">
                   
                         <div class="inner">
                           <img src="asset/img/villa4.jpg" alt="">
                           <h1>elevate</h1>
                           <p class="number" >1</p>
                           <div class="overlay"></div>
                         </div>
                             
                    
                    
                        <div class="inner">
                            <img src="asset/img/villa.jpg" alt="">
                            <h1>innovate</h1>
                            <p class="number" >2</p>
                            <div class="overlay"></div>
                          </div>
                              
                    
                    
                        <div class="inner">
                            <img src="asset/img/villa2.jpg" alt="">
                            <h1>reimagine</h1>
                            <p class="number">3</p>
                            <div class="overlay"></div>
                          </div>
                             
                    
                    
                        <div class="inner">
                            <img src="asset/img/villa3.jpg" alt="">
                            <h1>immerse</h1>
                            <p class="number">4</p>
                            <div class="overlay"></div>
                          </div>
                             
                    
                </div>

and my css code about this part

css .inner{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.inner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
}

css .inner{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.inner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
}

please can I get some idea about the way to achieve this ? thanks by advance

Victor Odoi•6mo ago

Try using scale in the x direction

Pat66•6mo ago

thanks I just do

.inner:hover {
    width:170%;
    transition:width .65s ease;
  }

.inner:hover {
    width:170%;
    transition:width .65s ease;
  }

problem solve

Zoë•6mo ago

The problem is that applying the transition to :hover means that it will only do the transition going to hover, as soon as you un-hover the width pops back. The transitions should be moved into these blocks

.inner {
    transition:width .65s ease;
}
.inner .number {
    transition: .5s ease;
}

.inner {
    transition:width .65s ease;
}
.inner .number {
    transition: .5s ease;
}

clevermissfox•6mo ago

KP has a video that will help immensely.

clevermissfox•6mo ago

https://youtu.be/WJERnXiFFug?si=M_6-WS8JnZbLZxJg

Kevin Powell

YouTube

Build a responsive, animated, accessible accordion that looks prett...

Accordions are a pretty common thing that we find on websites these days, but they’re often… a little bit lacking, either with awkward animations, or a complete lack of animations, and sometimes just looking pretty ugly. I recently came across an awesome codepen by Zed Dash that looked fantastic, and I thought it would be the perfect starting p...

clevermissfox•6mo ago

There’s also a link to the project in the YouTube description if you just want to review the code and not watch the whole video. But he makes it accessible too which is great

Zoë•6mo ago

0:34 fan of the design that inspired the video 🤭

Gaming

Programming

Rebuild an animation