#:hover

Dominar el manejo de textos con CSS es fundamental para cualquier diseño web. Vamos a crear un post completo que explique cómo estilizar textos usando propiedades CSS y pseudoclases, incluyendo ejemplos de código. Dominando las Propiedades CSS y Pseudoclases El texto es la columna vertebral de la mayoría de los sitios web. No se trata solo de legibilidad; un buen diseño tipográfico puede…

Então, o que eu fiz ali foi simplesmente usar o hover, usei o parâmetro transform: rotate para colocar rotação no objeto e também coloquei uma transição de 0,5 segundos, desta forma:

#objeto {transition: .5s;}#objeto:hover {transform: rotate(360deg);}

Esse código aí faz com que o objeto gire 360 graus quando alguém passar o cursor do mouse por cima dele. 

Vou mostrar isso mais na prática, clique aqui para ver o efeito. Os códigos que eu usei para fazer esse efeito foram estes:

.box {width: 60px; height: 60px; background: black; margin: 0px auto; transition: 1s;}.box:hover {transform: rotate(360deg); background: white;}

I love using CSS transitions. They just make the site more... interactive. This is also one of the things I love that CSS has updated, so that less Javascript, or scripting in general is needed.

So using CSS transitions on, say, :hover or :active (click) is really simple. Here is a button styling that I quickly made to show you how:

<style> /* Here is how you would normally do it: button{ border:1px solid red; } button:hover{ border:1px solid blue; } But by adding a few extra lines to the code, you can make it transition in a very smooth and stylish way. See: */ button{ -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; border:1px solid red; } button:hover{ border:1px solid blue; } </style>

It's pretty easy isn't it? Another trick is to add the transition codes into a separate class and add that class to everything that you want to have transitioned!

If you'd like to see this live on jsfiddle instead, click here If you are making a website that should be compatible without javascript, or just don't want to slow down the page with lots of scripts, this is a great trick. And it's really easy.

First of all you need to hide the div that's going to be shown on hover of something (let's say on hover of an image, since that's very typical). This is really easy in CSS, a little display:none; should do the trick.

#showonhover{ display:none; }

Now we are going to make the whole show on hover thing. Here's how:

<style> #showonhover{ display:none; } .showdiv:hover #showonhover{ display:block; /* when .showdiv is hovered, #showonhover will be visible */ } </style> <div class="showdiv"> <div id="showonhover"></div> </div>