Dev.to

Images in Circular Motion with onclick in CSS only

Welcome Back Guys! Please follow me on Instagram and Youtube for the latest CSS updates! I always post there first before sharing the tutorial details here. This is the latest tutorial, 'Images in Circular Motion with Onclick using CSS Only.' While experimenting with CSS, I created various samples. Below, you can explore all the different demos. Demo 1: (Centering the Image when clicked) Let's begin the tutorial! Below HTML code defines a section containing a container div that holds eight image containers. Each image container consists of an anchor link and an image. Clicking on an image will navigate to its respective container using the id attribute. The CSS variable "--t" is used for animation and layout positioning. Elon Musk Bill Gates Mark Zuck Jeff Bezos Bernard Arnault Sergey Brin JD Vance Sam Altman CSS Only! Below is the CSS Code: /* Global Styles */ body { background-color: black; font-size: 20px; line-height: 1.6; font-family: "Source Code Pro", Inconsolata, Menlo, monospace; } /* Headings */ h2 { color: white; text-align: center; } /* Layout */ section { width: 350px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } /* Circular Container */ .container { position: relative; width: 250px; height: 250px; border-radius: 50%; border: 2px dashed #222; display: flex; justify-content: center; align-items: center; margin: 50px auto; } /* Image Container */ .image-container { position: absolute; left: 40%; top: 40%; width: 50px; height: 50px; transform-origin: center center; --radius: 120px; /* circle size */ transform: rotate(calc(var(--t) * 45deg)) translate(var(--radius)) rotate(calc(var(--t) * -45deg)); transition: all 0.25s ease; } .image-container img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .image-container a { color: bisque; text-decoration: none; padding: 0; text-align: center; position: absolute; width: 100%; opacity: 0; height: 100%; } .image-container span { font-size: 1.5ch; line-height: normal; position: absolute; opacity: 0; color: bisque; left: 50%; top: 30%; width: min-content; text-align: center; z-index: 0; transform: rotate(calc(var(--t) * 45deg)) translate(var(--radius)) rotate(calc(var(--t) * -45deg)); display: none; } /* Targeted Elements */ :target { left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); } Using the HTML and CSS above, we achieve the following output: (Centering the Image when clicked) Demo 1 Output: Centering the Image when clicked Next Adding Close button: For Second demo add below classes in CSS and uncomment the line in html () a.close { font-size: 2ch; line-height: 2ch; color: #F44336; right: -20px; top: -20px; position: absolute; text-decoration: none; opacity: 0; } :target~a.close { opacity: 1; } Demo 2 Output: (Adding Close button) Next Centering the Image when clicked and display text: For Third demo overwrite with below classes in CSS .image-container span { font-size: 1.5ch; line-height: normal; position: absolute; opacity: 0; color: bisque; left: 50%; top: 30%; width: min-content; text-align: center; z-index: 0; transform: rotate(calc(var(--t) * 45deg)) translate(var(--radius)) rotate(calc(var(--t) * -45deg)); } /* newly added */ :target span { opacity: 1; animation: fade 0.5s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } Demo 3 Output: (Centering the Image when clicked and display text) Next Pushing the Image to right and display text: For Fourth demo overwrite with below classes in CSS .image-container span { font-size: 1.5ch; line-height: normal; position: absolute; opacity: 0; color: bisque; left: 50%; top: 100%; width: min-content; text-align: center; z-index: 0; transform: translate(-50%, 10px); } :target { width: 100px; height: 100px; left:75%; top:25%; transform: translate(var(--radius)); /* for linear effect */ } :target span { opacity: 1; animation: fade 0.5s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } Demo 4 Output: (Pushing the Image to right and display text) There is small change in :target. you can see the animation moving like a curve from bottom to right like a swing. Just add rotate properties. :target { width: 100px; height: 100px; left:75%; top:25%; transform: rotate(calc(var(--t) * 0deg)) /* for curve effect */ translate(var(--radius)) rotate(calc(var(--t) * 0deg)); /* for curve effect */ } D

Mar 2, 2025 - 19:54
 0
Images in Circular Motion with onclick in CSS only

Welcome Back Guys! Please follow me on Instagram and Youtube for the latest CSS updates! I always post there first before sharing the tutorial details here.

This is the latest tutorial, 'Images in Circular Motion with Onclick using CSS Only.' While experimenting with CSS, I created various samples. Below, you can explore all the different demos.

Demo 1: (Centering the Image when clicked)
Centering the Image when clicked

Let's begin the tutorial!
Below HTML code defines a section containing a container div that holds eight image containers. Each image container consists of an anchor link and an image. Clicking on an image will navigate to its respective container using the id attribute. The CSS variable "--t" is used for animation and layout positioning.


   

     class="container">
       id="elon" class="image-container" style="--t:0">
         href="#elon">
         src="https://img.freepik.com/free-photo/digital-art-cute-dog_23-2151124291.jpg" alt="1">Elon Musk
id="bill" class="image-container" style="--t:1"> href="#bill"> src="https://img.freepik.com/free-photo/digital-art-cute-dog_23-2151289761.jpg" alt="2">Bill Gates
id="mark" class="image-container" style="--t:2"> href="#mark"> src="https://img.freepik.com/free-photo/view-cartoon-animated-3d-penguin_23-2150882048.jpg" alt="3">Mark Zuck