Efeitos hover Css.

             Olá! Pessoal, vou mostra para vocês alguns efeitos que são possíveis em Css, o parâmetros que vamos utilizar é o Hover que é usado para indicar a ação do objeto quando o usuário passa o mouse em cima. Efeitos que podem deixar nossas páginas mais intuitivas.

---

Rotação

código: <style> img#rodar{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;} img#rodar:hover{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);} </style> <h2>Rotação</h2> <img src="http://i304.photobucket.com/albums/nn189/max_mxas/Pacman_zpsbviedj1t.png" id="rodar" />

---

Dissolver

código: <style> img#dissover{ -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; width: 200px; } img#dissover:hover{ -webkit-filter: blur(10px); filter: blur(10px); } </style> <h2>Dissolver</h2> <img src="http://i304.photobucket.com/albums/nn189/max_mxas/mario_zpsnact36d1.png" id="dissover" />

---

Sombra

código: <style> img#sombra{ -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; width: 200px; } img#sombra:hover{ -webkit-filter: drop-shadow(10px 7px 1px grey); filter: drop-shadow(10px 7px 1px grey); } </style> <h2>Sombra</h2> <img src="http://i304.photobucket.com/albums/nn189/max_mxas/La2ewxY1rBI_zpsbpmyamri.png" id="dissover" />

---

Ampliar

código: <style> img#ampliar{ -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; width: 200px; } img#ampliar:hover{ -webkit-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); -o-tramsform: scale(1.5); } </style> <h2>Ampliar</h2> <img src="http://i304.photobucket.com/albums/nn189/max_mxas/batman_zpsgpcvzli0.png" id="ampliar" />

---

             Lembrando que esses são apenas alguns exemplos das infinidades de coisas que são possíveis com o Css. A maioria das possibilidades só depende de nossa imaginação e o quando estamos dispostos para podemos coloca-las em praticas.