Unable to spin solely the outer edge of the circle without affecting the inner image or content

Is there a way to rotate just the border of the circle around an image, without rotating the image itself?

I am trying to achieve this look, with only the blue border rotating and not the image inside:

https://i.sstatic.net/02az9.png

This is what I have created so far:

#circle2 {
  width: 210px;
  height: 210px;
  background-color: transparent;
  border-radius: 100%;
  border: 6px solid #337AB7;
  border-left: 6px solid transparent;
}

#circle2 img {
display:block;
}
<div id="circle2">
  <div class="elementor-widget-container">
    <div class="elementor-image">
      <img src="https://i.ibb.co/WkdnS0f/BIcon-1.png" class="attachment-large size-large">
    </div>
  </div>
</div>

https://i.sstatic.net/DC1gZ.jpg

I need assistance in rotating only the blue border surrounding the image, not the image itself.

Your help would be greatly appreciated.

htmlcss

Answer №1

Rotate the container and make the child element rotate in the opposite direction simultaneously...

#circle2  {
  width: 200px;
  height: 200px;
  background-color: transparent;
  border-radius: 100%;
  border: 6px solid #337AB7;
  border-left: 6px solid transparent;
  overflow: hidden;
  animation: spin 5s linear infinite;
}

.elementor-widget-container {
  animation: spin 5s linear infinite reverse;
  background-color: transparent;
  border-radius: 100%;
  overflow: hidden;

}

img {
display:block;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div id="circle2">
  <div class="elementor-widget-container">
    <div class="elementor-image">
      <img src="http://www.fillmurray.com/200/200" class="attachment-large size-large">
    </div>
  </div>
</div>

Answer №2

To start, consider applying position:absolute; to the image, then insert 

animation: example  5s linear infinite;
at the end of #circle2. To finalize, include the following code snippet in your CSS:


@keyframes example{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

htmlcss

What's causing the text not to wrap when using float?

I've tried setting float:left for the image and float:right for the text, but the image is still overlapping the text. What I really want is for the text to wrap around the image - to be on the right side of the image at the beginning and below the i ...

htmlcss

Mysterious JQuery attribute

I've come across a piece of code that utilizes an unfamiliar selector that I can't seem to figure out: $("div[tag=" + someVariable + "]").css("display", "block"); From what I gather, the selector is searching for a div element with an attribute ...

jqueryhtmlcssdom

Is it just me, or does the float left - float right combination only break in IE

Oh dear, it seems like IE9 is causing some trouble again. The other "capable" browsers handle this HTML just fine, including IE8 which isn't even that great. Here's the code snippet: <div class="contact_info_city" id="contact_info_cityX"> ...

htmlcssinternet-explorercss-floatline-breaks

Creating a webpage with a left panel and draggable elements using JavaScript/jQuery

As someone new to Javascript/jQuery, I have been given the task of creating a web page with elements in a "pane" on the left side that can be dragged into a "droppable" div area on the right side. The entire right side will act as a droppable zone. I am u ...

javascriptjqueryhtmlcss

Having trouble replacing bootstrap with external CSS

As a beginner in a coding bootcamp, I have been introduced to the world of bootstrap. While some of my friends shy away from using it for various reasons, I have no choice but to learn it in class. I've experimented with different techniques to style ...

htmlcssbootstrap-4

Centering loaders within elements of an unordered list

I am working on a navbar that uses Bootstrap 3 and AngularJS. Within this navbar, I have an unordered list with li elements. Below is a snippet of my navbar: https://i.stack.imgur.com/o75Lp.png This is the code for my navbar: <div class="navbar-head ...

htmlcssangularjstwitter-bootstrap-3

A div element that automatically adjusts its width to fill the available horizontal space, and is then re

div</code> elements next to each other horizontally. The right div should adjust its size based on its content up to a set maximum width, while the left one should occupy the remaining space. I have successfully achieved this layout by floating the ...

htmlcsscss-float

Tips for implementing SelectedRowStyle in gridview with a bootstrap layout

I'm having trouble applying the SelectedRowStyle to a gridview in my application. The application uses a bootstrap template and the table css I applied is table table-striped. Does anyone know how to apply style for the selected row? ...

cssasp.nettwitter-bootstrapwebformsbootstrap-4

Is there a way to create a hover effect on a sidebar element?

I'm struggling to add a hover effect to the elements within my sidebar. I've tried using CSS :hover, but it doesn't seem to be working as expected. Any guidance or solution would be greatly appreciated. .sidebar .navbar .nav-link:hover{ ...

javascripthtmlcsshoverbootstrap-5

Guide on aligning two boxes in the center with HTML, CSS, and Bootstrap

Is there a way to perfectly center two buttons or clickable boxes, creating a layout similar to the image shown below? https://i.sstatic.net/Va1z2.png This is what has been attempted so far: CSS file .container_1 .panel_1 { position: absolute; ...

htmlcssbootstrap-4

My objective is to show the div element just once using AngularJS

Here's the scenario I want to show this div just once, not multiple times: //angular js code $scope.arr=["sunday","mpnday","tuesday"]; //html view <ul> <li ng-repeat="x in arr"> <div><p>{{ x }}</p> </div> & ...

javascripthtmlangularjs

jQuery Mobile Dialog Alert Box

Here's a code snippet that can be used to open a dialog box: <p><a href="ShopItems/Rotax125MicroMax.html" data-rel="dialog" data-role="button">Rotax 125 Micro Max</a></p> Next, we have a page whic ...

jqueryhtmljquery-mobile

The collision function is currently not functioning properly, causing a hindrance in movement. There are no other codes restricting movement

const rightPressed = false; const leftPressed = false; const upPressed = false; const downPressed = false; const players = []; players[0] = new victim(1234); const arrayw = 50; const arrayh = 50; const canvas = document.getElementById("myCanvas"); const ...

javascripthtml

The font size on mobile webkit suddenly grows larger without warning

Currently in the process of enhancing a website for mobile devices, and I'm almost finished (yay!) but there's one specific issue that is really challenging: The Method I decided to use CSS to transform a tab bar (which is essentially a list) i ...

androidioscsswebkitmobile-webkit

Specific phrase enclosed within div element

How can I concatenate three strings together when one of them is enclosed within a strong tag? The result is not what I expected. Can you identify the issue here? Result: There is no Colors for <strong>blah</strong> in the database. Expecte ...

javascripthtmlreactjs

Ways to generate an element with a specific identifier using a single line of code

When creating an element, I often use the following syntax: var foo = document.createElement('div'); To set the ID of the div, I would typically do this: foo.setAttribute('id', 'divName'); After some searching online, I ca ...

javascriptjqueryhtmlcss

What is the most efficient method for creating and adding an element in jQuery?

When it comes to appending div elements to a page, there are different approaches that can be taken. Let's explore two methods: $('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'>&l ...

javascriptjqueryhtml

Having Trouble Concealing an Element with jQuery UI

I am attempting to implement a jQuery slide effect where pressing a button causes the first paragraph tag to slide out of view and the second paragraph tag to slide into the viewport. Despite utilizing jQuery UI for the slide effects, I am encountering dif ...

javascriptjqueryhtmluser-interface

Boosting your website with a slick Bootstrap 4 responsive menu that easily accommodates additional

I have incorporated a main menu in my website using the Bootstrap 4 navbar. However, I also have an additional div (.social-navbar) containing some extra menu items that I want to RELOCATE and INSERT into the Bootstrap menu only on mobile devices. Essentia ...

javascriptjquerycsstwitter-bootstrap