Simple transition using clip-path


by Jeremy Caudle
code

I know I did another clip-path post yesterday, but this popped into my head as I was transferring old Animal Crossing screenshots of a micro-SD card. It’s a simple and pretty effective transition. What would be neat is to try and only have the full-color image load when the mouse is within a certain distance from the low-quality version. That would be tricky on a touchscreen, but a different presentation or a change of the button text may be all I would need.

Two characters in the game Animal Crossing New Horizons standing next to each other wearing similar outfits.

View the code:

HTML and JS 
<div class="code-block">
            
						<button>Trigger Transition</button>
           <div class="photo-wrapper">
               <img src="https://jeremycaudle.com/ygg/resources/acnhlow.jpg" width="427" height="240" alt="Two characters in the game Animal Crossing New Horizons standing next to each other wearing similar outfits." >
           </div>

</div>
CSS 
.code-block {
                margin: 2rem auto;
                background-color: #16a18a;
                max-width: 600px;
                padding: 2rem 0;
            }

            .code-block button {
                display: block;
                margin: 1rem auto;
                padding: .5rem 1rem;
                font-size: 20px;
                letter-spacing: 1px;
                border-radius: .5rem;
                background-color: white;
                border: none;
            }

            .photo-wrapper {
                width: 100%;
                height: auto;
                max-width: 540px;
                max-height: 303.517px;
                background-image: url('https://jeremycaudle.com/ygg/resources/acnhbw.png');
                background-size: contain;
                background-color: #16a18a;
                margin: 0 auto;
                border-radius: .5rem;
                box-shadow: .5rem .5rem .25em 0 rgba(0, 0, 0, .1);
            }

            .photo-wrapper > img {
                width: 100%;
                height: auto;
                max-width: 540px;
                max-height: 303.517px;
                clip-path: circle(0% at center center);
                border-radius: .5rem;
                transition: clip-path .5s ease-out;
            }

            .photo-wrapper:hover > img, button:active + .photo-wrapper > img {
                clip-path: circle(100% at center center);
            }

Tags