CODEWITHSUNDEEP
htmlcss
Rahul
Rahul

Reputation: 231

How not to rotate the image only the border around the image?

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.

Upvotes: 1

Views: 865

Answers (1)

Turnip
Turnip

Reputation: 36642

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>

Upvotes: 4

Related Questions