Creating a gradient border that rotates 360 degrees on mouse hover

.brand-img::after {
 content: '';
 position: relative;
 background-image: url('https://i.sstatic.net/Y2vyB.png');
 background-repeat: no-repeat;
 float: left;
 margin-left: 15px;
 transition: all 1.8s ease;
 width: 135px;
 height: 135px;
}
.brand-slider-inside img {
 border-radius: 50%;
 position: absolute;
 padding: 14px;
 left: 0px;
 top: 0px;
 width: 135px;
 height: 135px;
}
.brand-img:hover::after {
 transform: rotate(360deg) translate(0px);
}
<div class="brand-slider-inside">
<div class="brand-img">                                                        <img src="https://i.sstatic.net/tz2aw.png" alt="brand img">                                                    </div>
</div>

When hovering, the image rotates 360 degrees in a circle with a gradient border effect. Can you assist with achieving a smooth rotation in a perfect circle?

javascriptjquerycsshtml

Answer №1

To achieve a gradient effect without using an image, you can utilize multiple linear-gradient properties in the background of the container. The concept involves rotating the container and the image in opposite directions to create the illusion of a rotating background.

.clients-img {
  display: inline-block;
  position: relative;
  border-radius: 50%;
  background: linear-gradient(to right, #fff 50%, transparent 50%), linear-gradient(-15deg,#6fda44 25%, #fff 80%);
  transition:1s all;
}

.clients-img img {
  border-radius: 50%;
  width: 135px;
  height: 135px;
  padding: 15px;
  vertical-align: top;
  transition:1s all;
}

.clients-img:hover {
  transform: rotate(360deg);
}

.clients-img:hover img{
  transform: rotate(-360deg);
}
<div class="clients-img"> <img src="https://i.sstatic.net/tz2aw.png" alt="clients img"> </div>

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

Problems with Keith Wood's jQuery countdown plugin syncing with server time

My jQuery code isn't working as expected and I can't figure out why. It's meant to fetch the time from a remote server (in this case, using the server time of the author's website) and then calculate a countdown based on the time differ ...

jquery

Automatically choose radio buttons within an li element in a loop

Hey there, I'm new to SO and this is my first question. As a bit of a newbie, I found this jquery code snippet on another SO answer that I want to use. The function I'm aiming for is the same, but the markup structure in my HTML is different bec ...

javascriptjquery

How can I toggle a clicked switch in React MUI instead of all switches?

This is the current state in my parent component: const [feedbackType, setFeedbackType] = useState({ manual: true, auto: false, }); I am passing this state as a prop to the child component. In the child component, I have the following code: co ...

javascriptreactjsmaterial-ui

Trouble presenting information retrieved from API

I'm encountering an issue with displaying the data I fetched from an API. I'm not sure what's causing the problem... I attempted to use the map() function to access the data, but it's not functioning as expected either. import React fr ...

javascriptreactjsapi

Differences in outcomes have been observed between the elementLocated and findElements functions

Currently, I am in the process of developing Webdriver automation for a specific web application. As part of this process, I have created a test that seems to be functioning well most of the time but occasionally encounters an issue. it('verifies pre ...

javascriptselenium-webdriver

Issue with Bootstrap Carousel Interval Setting not Functioning as Expected

I recently added Twitter Bootstrap-Carousel to a website with the intention of using it to navigate through different sections of a module. However, I'm encountering an issue where setting the interval to false does not work as expected. When I set an ...

javascriptjqueryhtmltwitter-bootstrap

jsGrid is failing to load within a Vue application that is utilizing static data

Struggling to implement jsGrid for a basic table with header sorting in my Javascript and Vue application. Having trouble loading the sample code with various components spread across different files. Here are the relevant parts: HTML (symbol-container is ...

javascriptvue.jsjsgrid

I'm receiving identical results from findOne even when using different IDs

I am currently working on creating a new array of products based on a list of different Ids. However, I have encountered an issue where the same product is being returned for all Ids when using the findOne() method. let wishpro = ['632a5e5rtybdaaf ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to retrieve an object using callback data with jQuery?

Using jquery with a servlet to fetch data from a database. The callback function provides raw information from the database. How can I append these values to select options in jsp? Retrive_country servlet code: String sql1 = "SELECT * FROM state WHERE co ...

javajavascriptjqueryjspservlets

Elm div contenteditable loses cursor position after content update

Is there a way to maintain the cursor position while typing in a contenteditable div? I'm utilizing Elm to generate a text box and require the text within it to undergo processing with every input. The rationale behind opting for a contenteditable di ...

htmlcontenteditableelm

Sending a parameter from a click event to a function

Struggling with a jQuery and AJAX issue all night. I am new to both and trying to implement something similar to this example. I have an edit button with the ID stored in a data-ID attribute. Here's an example of what my button looks like: <butto ...

javascriptjqueryajax

Update the form field with today's date in a JHipster application

In our current project in JHipster, we are facing a challenge with setting the default value of a form field as the current date. JHipster offers a moment format for dates, which is essentially an ngbdatepicker. However, when attempting to change the inpu ...

htmlangularjstypescriptjhipsterjhipster-registry

AngularJS - Interactive web pages powered by controller scripts

I am experiencing an issue with my AngularJS page where a popup is not displaying correctly. The popup HTML is fetched dynamically from the server using an AJAX request, including a new controller and relevant AngularJS code. The problem arises when the ch ...

javascriptjqueryajaxangularjs

obtaining the data stored in the backing bean and showcasing it upon submitting the form

I currently have an a4j:commandbutton implemented on my jsf page. Here is the code snippet- <a4j:commandButton id="submitBtn" value="#{msgsMass.MM_04_02_BTN_CONTINUE}" reRender="addNewCardForm,saveAddNewCardForm" immediate="true" action="#{bBea ...

javascriptajaxjsfrichfaces

How can I effectively utilize executeScript in Selenium and webdriver.io?

I'm currently working on testing a basic form using Selenium, WebDriver.io, and Node.js (with Mocha). Here is a snippet of the code I have: var webdriverio = require('webdriverio'); var expect = require('expect'); describe(' ...

javascriptnode.jsseleniumselenium-webdriverwebdriver-io

Encountered a glitch during the npm installation process for mui core

I recently set up a new create-react-app and am still encountering the same error message. After installing MUI, I'm getting an 'unable to resolve dependency tree' issue. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depende ...

htmlreactjsmaterial-ui

Discovering components with identical html attributes in Selenium

I am currently developing a web crawler using Python 3.8. My goal is to convert the table below into a pandas dataframe using Selenium, Pandas, and BeautifulSoup. <table class="no_border_top" width="95%" align="center"> ...

pythonhtmlselenium-webdriver

Display the variable value in an HTML format following the submission of a request to an API using NODE JS, express, and jquery

Seeking assistance with completing a straightforward task: Creating an HTML AJAX link that triggers a Node.js API call to retrieve a value, wait for the response, and then display the value in HTML, JS, or PHP. After clicking on the "Get My Value" link be ...

htmljquerynode.jsajaxexpress

A guide on integrating Javascript and CSS files in Express.js

I'm currently running a simple node server from a page.js file as part of a system setup test. Here's the code snippet: var express = require('express'); var app = express(); app.get('/', function(req, res) { res.sendFil ...

htmlnode.jsexpress

A collection of items displayed in an unordered format across two columns

I need help creating a list that displays in two columns. One column for odd numbers, the other for even numbers. Here's an example of what I'm trying to achieve: +----------------------------------------------------+ | col- ...

htmlcsstwitter-bootstrapcol