SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rotate a background image on hover of parent element?

    Can someone tell me if its possible, via css3 or jQuery, to rotate a background image (without rotating the container that the background is attached to) on hover of the container?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You can do it for Firefox only if you add the image using :after.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    div {
    	width:300px;
    	height:300px;
    	border:1px solid #000;
    	margin:90px;
    	position:relative;
    }
    div:after{
    	content:" ";
    	top:10px;
    	left:10px;
    	right:10px;
    	bottom:10px;
    	position:absolute;
    	background:red;
    	-webkit-transition: all 1s ease-in-out;
    	-moz-transition: all 1s ease-in-out;
    	transition: all 1s ease-in-out;
    }
    div:hover:after {
    	-webkit-transform: rotate(360deg);
    	-moz-transform: rotate(360deg);
    	transform: rotate(360deg);
    }
    </style>
    </head>
    
    <body>
    <div> </div>
    </body>
    </html>
    Firefox seems to be the only one that can handle that though.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Paul. GC to the rescue every time :-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •