CSS hover: Efeitos de transições ao passar o mouse

Seja alguns exemplos de efeitos que modificam o objeto quando o usuário passa o mouse sobre ele. Essa ação é identifica no CSS (Folha de Estilo em Cascatas) como HOVER.

*Passe o mouse sobre as imagens e visualize os efeitos.

1 - Efeito Rotate

<img class="imagem1" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDtFwNhHks_As-cgcu6Eh2YUKfc-r-3uJVdA9A_8F2fFGk_jt4X-huw1fqQOD4eKdXCu53Jul2kr3lzvFTuGyzSjZ580lqeeXX8Jvy2Jk5WmlgVg1Wg9wZlWchS5U-vGNcYzIrIoKWc20/s1600/imagem1.gif' />

<style>
.imagem1{
    transition: all 1s;
    cursor: pointer;
}

.imagem1:hover{
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
</style>

2 - Efeito Filter Blur

<img class="imagem2" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2YVTJsN4Hnlmhpi-ltM76n3lRGF1F5mgVAOFo5CpF_HjY6e8X1AFKsl8oL2QEKSE9FLsUFgmDfv3ADxVe8POvrZjHroxMJ5wzw1KjjezX3bMRjeZBTxG3_-ObnO2JEvlwTYBuQcxFQI/s1600/imagem2.jpg' />

<style>
.imagem2{
    transition: all 0.5s;
    cursor: pointer;
}

.imagem2:hover{
    -webkit-filter: blur(5px);
    filter: blur(5px);
}
</style>

3 - Efeito Scale

        <img class="imagem3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOvw4lGsgUQkoFO_QLtMfRzom70CThUKHxbS_SHWiU-XHd_vg-CAwyOJF91DlfGGpTUoxoKSMVOdmP6s_Gw2yR33miAFKqOv3DodV0NMeB2hFdmmiHFvcTXlKIZZM02I9PbqOTy9xio0/s1600/imagem3.png" /> 

<style>
.imagem3{
    transition: all 0.5s;
    cursor: pointer;
}

.imagem3:hover{
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
</style>

4 - Efeito Drop Shadow

<img class="imagem4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiZYM1TLWTRlGHZ5Y0EyhyphenhyphenlS2Ccl3LRrQj0HrRhGC-ZGKjphjeGXa1dEQUwx6CPErWENRdMGmOS8edn927CltY08tPaRe14LD1LnLMFY-x5Br6sgPTI-mi0FiVs-ywileKDOA49Om8bW8/s1600/imagem4.gif" /> 

<style>
.imagem4{
    transition: all 0.5s;
    cursor: pointer;
}

.imagem4:hover{
    -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
}
</style>

5 - Efeito border e border-radius

<img class="imagem5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8UdgCj7SF-pDzp1nx7HeHXpkt9MBpZwPnnXz_QHEuNWJEtaJ_YzeCCOBMCMZg9_9JrJLXui3HTjb7H3akFgKc4Kt1JojQGIEqbPdzmbcgPNx2nKX0Toac2Js1yN7_iu5LM3tYVwtTBhw/s1600/imagem5.gif" />  

<style>
.imagem5{
    transition: all .5s;
    border: 10px solid transparent;
}
.imagem5:hover{
    border: 10px solid #136497;
    border-radius: 50%;
}
</style>

Extra - Todos Efeitos Juntos (menos o BLUR)

<img class="imagem6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgRprCg6O6XbMXEObLc7XwMj5QkH4rpXNcyiA2612sD6FS6dBuJwoZAgGDv5Pc-DfWDZfsHcA1yDUp7xkS7zGEfoSqzqDJw4sMvQXKhBVr4OjK8V7tLyieOITrHZZ7ptEBw-mdiqRWvo/s1600/skin-garen-cavaleiro-do-terror-1024x604.jpg" /> 

<style>

.imagem6{
    transition: all .5s;
    border: 10px solid #eeeeee;
}
.imagem6:hover{
    border: 10px solid #781f40;
    border-radius: 50%;
    -webkit-filter: drop-shadow(15px 7px 1px rgba(0,0,0,.5));
    filter: drop-shadow(15px 7px 1px rgba(0,0,0,.5));
    -webkit-transform: rotateZ(-360deg) scale(1.5);
    transform: rotateZ(-360deg) scale(1.5);
}

</style>