title: How to make image rotate on hover css
body: <p>I want to make my social media icons on the footer of my page rotate on hover. I put a  tag wrapper and individual  tags on each social media icon. On CSS I used '.wrapper' function but when I do '.wrapper:hover' on CSS it wont recognise the ':hover' part.</p>
  
  <p>I don't know what I wrote wrong? Can someone help out.</p>
  
  <p>Much appreciated</p>
  
  <p>HTML</p>
  
  <pre><code>        &lt;div class="footer"&gt;
          &lt;div id="footer-header"&gt;
              &lt;p&gt;Keep Up With Us...&lt;/p&gt;
          &lt;/div&gt;
          &lt;center&gt;&lt;div class="social-wrapper"&gt;
              &lt;div id="facebook"&gt;&lt;a href="http://www.facebook.com"&gt;&lt;img src="Facebook.png" alt="Facebook"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div id="instagram"&gt;&lt;a href="http://www.instagram.com/"&gt;&lt;img src="Instagram.png" alt="Instagram"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div id="twitter"&gt;&lt;a href="http://www.twitter.com/"&gt;&lt;img src="Twitter.png" alt="Twitter"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div id="youtube"&gt;&lt;a href="http://www.youtube.com/"&gt;&lt;img src="Youtube.png" alt="Youtube"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;/center&gt;
          &lt;div id="tag-branding"&gt;
              &lt;img src="tag.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.footer {padding: 376px 0px 0px 0px;}
  #footer-header {text-align: center; font-family: 'Raleway'; font-weight: 500; font-size: 29px; line-height: 0; margin: 0;}
  #facebook {display: inline; margin: 0px 5px 0px 0px;}
  #instagram {display: inline; margin: 0px 5px 0px 0px;}
  #twitter {display: inline; margin: 0px 5px 0px 0px;}
  #youtube {display: inline; margin: 0px 5px 0px 0px;}
  
  #tag-branding {
    padding: 99px 50px 0px 0px;
   }
  .social-wrapper {border-radius:50%; -webkit-transition: -webkit-transform .8s ease-in-out; -ms-transition: -ms-transform .8s ease-in-out; transition: transform .8s ease-in-out;}
  social-wrapper:hover {transform:rotate(360deg); -ms-transform:rotate(360deg); -webkit-transform:rotate(360deg);}
  </code></pre>
  
  <p>Also it would be appreciated if you could point out what you changed, if you do, so I could learn for future.</p>