[ANSWERED] html – How not to rotate the image only the border around the image?

Question 1

Change this selector

#circle1 .elementor-widget-container:hover

to

#circle1:hover .elementor-widget-container

#circle1 {
  width: 210px;
  height: 210px;
  background-color: transparent;
  border-radius: 100%;
  border: 6px solid #337AB7;
  border-left: 6px solid transparent;
  overflow: hidden;
  transform: rotate(50deg);
  transition: linear 2s;
}

#circle1 .elementor-widget-container {
  transform: rotate(-50deg);
  background-color: transparent;
  border-radius: 100%;
  overflow: hidden;
  transition: linear 2s;
}

#circle1:hover {
  transform: rotate(410deg);
  transition: linear 2s;
}

#circle1:hover .elementor-widget-container {
  transform: rotate(-410deg);
  transition: linear 2s;
}

#circle1 img {
  display: block;
}

<div id="circle1">
  <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>

You could make both your HTML and CSS much simpler by using a pseudo element.

#circle1 {
  position: relative;
}

#circle1::after {
  content: "";
  display: block;
  width: 210px;
  height: 210px;
  background-color: transparent;
  border-radius: 100%;
  border: 6px solid #337AB7;
  border-left: 6px solid transparent;
  transform: rotate(50deg);
  transition: linear 2s;
  position: absolute;
  top: -6px;
  left: -6px;
}

#circle1:hover::after {
  transform: rotate(410deg);
  transition: linear 2s;
}

<div id="circle1">
  <img src="https://i.ibb.co/WkdnS0f/BIcon-1.png" class="attachment-large size-large">
</div>

Question 2

I am working on my project and I have added the image with border. I am rotating the border on hover but the problem is that, the image is also rotating.

#circle1 {
  width: 210px;
  height: 210px;
  background-color: transparent;
  border-radius: 100%;
  border: 6px solid #337AB7;
  border-left: 6px solid transparent;
  overflow: hidden;
  transform: rotate(50deg);
  transition: linear 2s;
}

#circle1 .elementor-widget-container {
  transform: rotate(-50deg);
  background-color: transparent;
  border-radius: 100%;
  overflow: hidden;
  transition: linear 2s;
}

#circle1:hover {
  transform: rotate(410deg);
  transition: linear 2s;
}

#circle1 .elementor-widget-container:hover {
  transform: rotate(-410deg);
  transition: linear 2s;
}

#circle1 img {
  display: block;
}

<div id="circle1">
  <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>

In this, on hover image is also rotating but I dont want to rotate the image, only border should rotate.

Just hover to the image frequently, you will see image is also rotating.

Any help is much appreciated.

Bollate

[ANSWERED] html – How not to rotate the image only the border around the image?

By

Solution 1 :

Problem :

By

Related Post

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate