Animação de imagem mouse over

<< Click to Display Table of Contents >>

Navigation:  Html >

Animação de imagem mouse over

Previous pageReturn to chapter overviewNext page

Teste - passe o mouse por cima dos ícones

 

Não funciona no IE, todo o resto funciona

 

Scale on Hover CSS Animation Effect

 

Faça esse código

 

<html>

<head>

   <title>Scale on Hover CSS Animation Effect</title>

   <style type="text/css">

       #menu

      {

           width: 300px;

         margin: 80px auto;

      }

   

      #menu img 

      { 

         -webkit-transition: -webkit-transform .2s ease-in-out;

         border-style: none;

         

           transition: transition .2s ease-in-out;

           -moz-transition: -moz-transition .2s ease-in-out;

           -o-transition: -o-transition .2s ease-in-out;

         

      }

 

      #menu img:hover 

      { 

           transform: scale(1.5);

           -moz-transform: scale(1.5); /* Firefox 4 */

           -o-transform: scale(1.5); /* Opera */         

         -webkit-transform: scale(1.5);  /* Chrome */

      }

     </style>

</head>

 

<body>

    <div id="menu">

       <a href="#"> <img src="http://www.cabanhaguinther.com.br/img/rss.png" > </a>

      <a href="#"> <img src="http://www.emerson.blog.br/wp-content/themes/zeebizzcard/images/icons/facebook.png"> </a>

      <a href="#"> <img src="http://www.netvasco.com.br/img/icon_twitter.gif"> </a>

    </div>

</body>

 

</html>