DEV Community

Cover image for Images in Circular Motion with onclick in CSS only
Prahalad S
Prahalad S

Posted on

Images in Circular Motion with onclick in CSS only

#tutorial #css #webdev

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.

<body>
   <section>
    <div class="container">
      <div id="elon" class="image-container" style="--t:0">
        <a href="#elon"></a>
        <img src="https://img.freepik.com/free-photo/digital-art-cute-dog_23-2151124291.jpg" alt="1"><span>Elon Musk</span></div>
      <div id="bill" class="image-container" style="--t:1">
        <a href="#bill"></a>
        <img src="https://img.freepik.com/free-photo/digital-art-cute-dog_23-2151289761.jpg" alt="2"><span>Bill Gates</span></div>
      <div id="mark" class="image-container" style="--t:2">
        <a href="#mark"></a>
        <img src="https://img.freepik.com/free-photo/view-cartoon-animated-3d-penguin_23-2150882048.jpg" alt="3"><span>Mark Zuck</span></div>
      <div id="jeff" class="image-container" style="--t:3">
        <a href="#jeff"></a>
        <img src="https://img.freepik.com/free-photo/portrait-cute-3d-elephant_23-2151533160.jpg" alt="4"><span>Jeff Bezos</span></div>
      <div id="bernad" class="image-container" style="--t:4">
        <a href="#bernad"></a>
        <img src="https://img.freepik.com/free-photo/view-cartoon-animated-3d-penguin_23-2150881930.jpg" alt="5"><span>Bernard Arnault</span></div>
      <div id="sergey" class="image-container" style="--t:5">
        <a href="#sergey"></a>
        <img src="https://img.freepik.com/free-photo/view-cartoon-animated-3d-penguin_23-2150882086.jpg" alt="6"><span>Sergey Brin</span></div>
      <div id="vance" class="image-container" style="--t:6">
        <a href="#vance"></a>
        <img src="https://img.freepik.com/free-photo/view-three-dimensional-animated-cartoon-bird_23-2150946467.jpg" alt="7"><span>JD Vance</span></div>
      <div id="sam" class="image-container" style="--t:7">
        <a href="#sam"></a>
        <img src="https://img.freepik.com/free-photo/view-3d-cool-modern-bird_23-2150946449.jpg" alt="8"><span>Sam Altman</span></div>
          <!-- <a class="close" href="#">&#10799;</a> -->
    </div>
  </section>
  <h2>CSS Only!</h2>
</body>
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

Using the HTML and CSS above, we achieve the following output: (Centering the Image when clicked)

Demo 1 Output: Centering the Image when clicked
Centering the Image when clicked

Next Adding Close button:
For Second demo add below classes in CSS and uncomment the line in html (<!-- <a class="close" href="#">&#10799;</a> -->)

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;
}
Enter fullscreen mode Exit fullscreen mode

Demo 2 Output: (Adding Close button)
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;
  }
}
Enter fullscreen mode Exit fullscreen mode

Demo 3 Output: (Centering the Image when clicked and display text)
Image description

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

Demo 4 Output: (Pushing the Image to right and display text)
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 */
}
Enter fullscreen mode Exit fullscreen mode

Demo 4.5 Output: (Pushing the Image to right like curve(swing from bottom) and display text). Image rotates through the orbit(dashed border line).
Pushing the Image to right like curve(swing from bottom) and display text

Next Click on the text to center the Image:
For Fifth demo overwrite with below HTML and classes in CSS. In Html we are going to comment all anchor tags and add new anchor tags at bottom in <ul>

<section>
    <div class="container">
      <div id="elon" class="image-container" style="--t:0">
        <!-- <a href="#elon"></a> -->
        <img src="https://img.freepik.com/free-photo/digital-art-cute-dog_23-2151124291.jpg" alt="1"><span>Elon Musk</span>
      </div>
      <div id="bill" class="image-container" style="--t:1">
        <!-- <a href="#bill"></a> -->
        <img src="https://img.freepik.com/free-photo/digital-art-cute-dog_23-2151289761.jpg" alt="2"><span>Bill Gates</span></div>
      <div id="mark" class="image-container" style="--t:2">
        <!-- <a href="#mark"></a> -->
        <img src="https://img.freepik.com/free-photo/view-cartoon-animated-3d-penguin_23-2150882048.jpg" alt="3"><span>Mark Zuck</span></div>
      <div id="jeff" class="image-container" style="--t:3">
        <!-- <a href="#jeff"></a> -->
        <img src="https://img.freepik.com/free-photo/portrait-cute-3d-elephant_23-2151533160.jpg" alt="4"><span>Jeff Bezos</span></div>
      <div id="bernad" class="image-container" style="--t:4">
        <!-- <a href="#bernad"></a> -->
        <img src="https://img.freepik.com/free-photo/view-cartoon-animated-3d-penguin_23-2150881930.jpg" alt="5"><span>Bernard Arnault</span></div>
      <div id="sergey" class="image-container" style="--t:5">
        <!-- <a href="#sergey"></a> -->
        <img src="https://img.freepik.com/free-photo/view-cartoon-animated-3d-penguin_23-2150882086.jpg" alt="6"><span>Sergey Brin</span></div>
      <div id="vance" class="image-container" style="--t:6">
        <!-- <a href="#vance"></a> -->
        <img src="https://img.freepik.com/free-photo/view-three-dimensional-animated-cartoon-bird_23-2150946467.jpg" alt="7"><span>JD Vance</span></div>
      <div id="sam" class="image-container" style="--t:7">
        <!-- <a href="#sam"></a> -->
        <img src="https://img.freepik.com/free-photo/view-3d-cool-modern-bird_23-2150946449.jpg" alt="8"><span>Sam Altman</span></div>
    </div>

    <ul>
      <li><a href="#elon">Elon Musk</a></li>
      <li><a href="#bill">Bill Gates</a></li>
      <li><a href="#mark">Mark Zuck</a></li>
      <li><a href="#jeff">Jeff Bezos</a></li>
      <li><a href="#bernad">Bernard Arnault</a></li>
      <li><a href="#sergey">Sergey Brin</a></li>
      <li><a href="#vance">JD Vance</a></li>
      <li><a href="#sam">Sam Altman</a></li>
    </ul>
</section>
Enter fullscreen mode Exit fullscreen mode

Overwrite with below CSS Classes

section {
  width: 650px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a {
  color: bisque;
  text-decoration: none;
  padding: 0 10px;
}

a:hover {
  background: crimson;
  color: white;
  text-decoration: none;
}

.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 {
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

/* :target span {
  opacity: 1;
  animation: fade 0.5s ease;
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
} */
Enter fullscreen mode Exit fullscreen mode

Demo 5 Output: (Click on the text to center the Image)
Click on the text to center the Image

Next Pushing the Image to right when clicked on text
For Sixth demo use same Html and CSS above. Overwrite with below 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:
    rotate(calc(var(--t) * 0deg)) 
    translate(var(--radius)) 
    rotate(calc(var(--t) * 0deg));
  /* for linear effect uncommnet below and comment above transform */
  /* transform: translate(var(--radius)); */
}

/* :target span {
  opacity: 1;
  animation: fade 0.5s ease;
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
} */
Enter fullscreen mode Exit fullscreen mode

Demo 6 Output: (Pushing the Image to right when clicked on text)
Pushing the Image to right when clicked on text

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

Codepen Demo

Top comments (0)

Read next

ramkumar-m-n profile image

How to Write Code 4X Faster with GitHub Copilot in VS Code

Ramkumar M N -

nix_25 profile image

How to Deploy Flowise and Qdrant on Qubinets and Start Building AI Agents

Nix -

keploy profile image

Streamlining Deployments: How To Master Gitops With Fluxcd

keploy -

brylie profile image

The State of Open-Source Tailwind CSS Component Frameworks: A Developer's Guide

Brylie Christopher Oxley -