Tips for spinning the background image with CSS

I am having an issue with rotating only the background image of a custom radio button when selected, instead it rotates the entire div.

You can view my current progress on this jsFiddle link

ul.pt-answers > li > label > input:checked +img {  
    background: url(http://www.opinionpoll.in/files/images/vote_symbol.png);
    background-repeat: no-repeat;
    background-position:center center;
    background-size:30px 30px;
    -webkit-animation:spin 0.5s ease 1 both;
    -moz-animation:spin 0.5s ease 1 both;
    animation:spin 0.5s ease 1 both;
    border:none;

}


@-moz-keyframes spin { 100% { -moz-transform: rotate(30deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(30deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(30deg); } }

Answer №1

To achieve the desired effect, I recommend utilizing the <div> element tag instead of the <img>, enabling you to incorporate a pseudo ::before element within it. By defining specific CSS selectors to create the pseudo ::before element, setting background properties, and implementing the spin effect, you can easily achieve your desired outcome.

You can view an example of what I mean by visiting this updated fiddle here.

For more detailed information, please refer to this resource here.

Edit: corrected spelling errors.

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

Avoid loading the background image by utilizing CSS to set the background image

Whenever I attempt to assign a background image using CSS, it triggers a console error. This is my CSS code: body { background-image: url("background.png"); background-repeat: no-repeat; } The error message displayed is: GET http://localhost/myWeb/ ...

:host-selector for Angular Material dialog

I am currently working with a dialog component provided by angular-material and I need to customize the appearance of the popup dialog. I am aware that there is some support for styling through the component generation: let dialogRef = dialog.open(MyDi ...

Creating a responsive flexbox design that transitions smoothly between desktop and mobile view can greatly enhance the

I'm in the process of creating a website using the flexbox property. My goal is to have the color of the boxes change when a user hovers over them, and I want the boxes to adjust accordingly on mobile devices. Below is my code snippet: HTML: <div ...

I'm puzzled as to why my JavaScript code only functions correctly when I place it after the HTML, despite having a window.onload event handler in place

Just beginning my journey in a CS class and seeking guidance for my lack of basic knowledge. I've noticed that this JS code only works if placed after the HTML, not within the head tag. Shouldn't window.onload handle that? Can someone clarify wha ...

Is it possible to remove htmlescape from the custom options in Magento? Can you specify which file showcases the custom

Looking to incorporate HTML into custom option labels for products on my Magento store. Unfortunately, Magento does not parse HTML by default when it is placed in the custom options interface. I suspect there may be a line like "$this->htmlEscape()" wit ...

Obtaining the location data of the mouse cursor following its movement

Exploring the movement of the mouse cursor, there was a noticeable change in its position after it moved. To retrieve the current location of the mouse post-movement, especially when it's situated within the scrollbar area, certain measures need to be ...

css for floating labels in input and textarea using bootstrap

I have implemented the Bootstrap Float-label feature found at https://github.com/tonystar/float-label-css Note: I made some custom changes to suit my needs. Issues : 1) While clicking on an input, the float label functions correctly. However, the bootst ...

Discovering the method to extract the necessary HTML code for JSON integration

While reviewing certain documents, I came across information suggesting that with jsoup (for Android), it is possible to retrieve specific elements from an HTML source. However, the documentation does not provide clear instructions on how to locate exactly ...

Tips on creating a hover-activated drop-down submenu

I'm having trouble getting the submenu to display correctly when hovering over parent list items. It's displaying in a strange way, is there a standard method for doing this? I can't seem to make any code adjustments work with my current set ...

Tips for creating a responsive HTML5 form

I am trying to center and make my form responsive. Can you help me achieve that with the code below? HTML5 Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ...

What is the reason behind the default font size being longer than 1em?

During my experimentation, I encountered an issue. I set the height of a div to 1em, expecting it to contain the entire text within. However, it did not. In my browser, 1em is equivalent to 16px. On not specifying the height of the div, it successfully co ...

How to Retrieve Element Property Values from the DOM with JavaScript

I am currently attempting to access the property of an element within my webpage. My main objective is to toggle a float property between left and right when a specific onClick event occurs. However, despite my efforts, I am facing challenges in even acces ...

Utilizing CSS for Aligning Horizontal Lists

How can I create a horizontal list with square bullets using the following style type? When I use display: inline, the squares don't appear. Any ideas on how to fix this issue? .vertical li {display: inline; list-style-type: square; padding-right: 5p ...

Changing the entire content of a webpage from the server using AJAX

I am looking to update the entire page content with the click of a button, transitioning from Words.html to SelectNumber.html This snippet is from Words.html <html> <head> <meta charset="UTF-8"> <title>Number Game< ...

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

The 'Bfrip' button is missing from the DOM

Having some issues with displaying table content using DataTables. Everything seems to be working smoothly except for the Buttons, which are not appearing as expected. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.1 ...

CSS: nested sticky element contained within an absolute element

I am facing an issue with a table that has a sticky column, and the absolute menu within it is appearing behind the sticky column instead of in front. I have tried adjusting the z-index property but it didn't work. Can someone please assist me with th ...

Text displayed in a pop-up when hovering

I'm in search of suggestions for creating a text pop-up that displays when the mouse hovers over specific text. After researching numerous websites, I haven't found exactly what I need. Currently, I have a table with headers at the top and I woul ...

looping through a JSON array in angular

I am presented with a JSON string that appears as follows. { "testdata": [{ "id": 1, "name": "testname1 ", "description": "test description1" }, ...

aligning content that has exceeded the boundaries

I have a list of dynamically created <a> tags without text, to which I apply background images. These icons are displayed within a <div> container using the float: left; style. As the row of icons becomes too long, it overflows and starts a ne ...