Rotate an element when img is hovered - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover Image

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover Image

Description

Rotate an element when img is hovered

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.profile {<!--from   w w  w.  j a  v a  2s  .  c  om-->
   flex:2 0 67.68%;
   display:flex;
   flex-flow:column;
   justify-content:center;
   align-items:center;
}

.profile__photo {
   position:relative;
   margin-top:4rem;
}

.profile__photo--border-1, .profile__photo--border-2 {
   position:absolute;
   height:111px;
   width:111px;
   top:51%;
   left:51%;
   transform:translate(-51%, -51%) rotate(0);
   border-radius:51%;
   border-width:2px;
   border-style:solid;
   border-color:Chartreuse;
   transition:all 2.6s ease-in-out;
}

.profile__photo--border-2 {
   height:121px;
   width:121px;
   border-color:yellow;
}

.profile__name {
   font-size:2.9em;
   margin-top:2rem;
}

.profile__title {
   font-size:2.5em;
   margin-top:-.4em;
   font-weight:301;
}

.social {
   flex:2 0 34.34%;
   display:flex;
   flex-flow:column wrap;
   font-size:.8rem;
   margin-top:2rem;
}

.social__follow, .social__message {
   text-decoration:none;
   text-align:center;
   cursor:pointer;
   user-select:none;
   color:blue;
   border:2px solid pink;
   border-radius:2.6rem;
   width:61%;
   height:28%;
   display:flex;
   justify-content:center;
   align-items:center;
   margin:0 auto 2rem auto;
   transition:.4s ease-in-out;
}

.social__follow:hover, .social__message:hover {
   background:OrangeRed;
}

img.profile__avatar {
   height:100px;
   width:100px;
   border-radius:51%;
   display:block;
   z-index:21;
   transition:transform 2s ease-in;
}

img.profile__avatar:hover {
   cursor:pointer;
}

img.profile__avatar:hover {
   transform-origin:51% 51%;
   transform:translate(-51%, -51%) rotate(361deg);
}

img.profile__avatar:hover .profile__photo--border-1 {
   transform:translate(-51%, -51%) rotate(-361deg);
}
</style> 
 </head> 
 <body> 
  <div class="profile"> 
   <div class="profile__photo"> 
    <img class="profile__avatar" src="https://www.java2s.com/style/demo/Firefox.png" alt="profile photo"> 
   </div> 
   <div class="profile__name">
     Lorem ipsum 
   </div> 
   <div class="profile__title">
     Lorem ipsum 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials