🔧 Images in Circular Motion with onclick in CSS only

🕛 Zeit seit Veröffentlichung: 51 Tage, 3 Stunden 52 Minuten
📆 Veröffentlicht am: 02.03.2025 um 19:35 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

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.

<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>

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 */
}

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).

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>

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;
  }
} */

Demo 5 Output: (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;
  }
} */

Demo 6 Output: (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

...

🕵️ CVE-2024-8914 | haibasoft Thanh Toán Quét Mã QR Code Tự Động Plugin up to 2.0.1 on WordPress wp_kses_allowed_html onclick cross site scripting

🕛 84 Tage, 16 Stunden 4 Minuten
📆 28.01.2025 um 06:55 Uhr
📈 23.52 Punkte
🕵️ Sicherheitslücken

☑ Lösungen

☑ Betriebssysteme

☑ IT-Sicherheit

☑ Cyberbedrohungen

☑ Ressourcen

☑ Videos

☑ Sicherheitstipps

☑ Häufig gesucht

🔧 Images in Circular Motion with onclick in CSS only

Sharing is caring on Social Media