Resolvi postar alguma coisa rapidinho aqui agora haha.
Então, acho que a maioria de vocês gostam de efeitos que enfeitam o blog, não é?!
Confira o efeito clicando aqui.
Clique em Leia Mais para conferir o tutorial.
Efeito 1 :
cole esse código entre <style> e </style>
/******* Efeito cute por marida-perfeit4 {dianna} Revolutionhtml,credite o efeito ******/
.imagem {margin-top: 120px; margin-left: 36px; width: 220px; height: 240px; position: absolute;position:fixed background-color: transparent; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; z-index:90000000; position:fixed; z-index : 99999999999999999999;}
.imagem img {position:fixed; -webkit-transition: all 1s ease-in-out;-webkit-border-radius: 0px 0px 0px 0px; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; display: block; width: 220px; height: 240px; background-color: ; margin-left:0px; margin-top:0px; opacity:1;border: 10px solid #F795A9;padding: 0px;}
.imagem img.top { opacity:1;}
.imagem:hover img.top, .cf4.hover_effect img.top {opacity:2 ;border:4px solid {color:bordaimg};-webkit-border-radius: 20px 20px 20px 20px;-webkit-transform: rotate(0deg);}
.imagem:hover img.bottom, .cf4.hover_effect img.bottom {filter:gray}
Agora cole esse abaixo de <body>
<div class=”imagem” class=”hover”>
<img class=”bottom shadow” src=”http://static.tumblr.com/kbesbrd/67fmmwmms/tumblr_mmt803je1z1rmo5pro1_1280.jpg”style=”-webkit-filter: grayscale(100%);” >
<img class=”top shadow” src=”http://static.tumblr.com/kbesbrd/67fmmwmms/tumblr_mmt803je1z1rmo5pro1_1280.jpg”></div>
</div>
——-
Efeito 2 :
Se quizer o segundo efeito ,cole o código abaixo entre <style> e </style>
/******* Efeito cute por marida-perfeit4 {dianna} Revolutionhtml,credite o efeito ******/
.imagem2 {margin-top: 120px; margin-left: 290px; width: 220px; height: 240px; position: absolute;position:fixed background-color: transparent; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; z-index:90000000; position:fixed; z-index : 99999999999999999999;}
.imagem2 img {position:fixed; -webkit-transition: all 1s ease-in-out;-webkit-border-radius: 0px 0px 0px 0px; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; display: block; width: 220px; height: 240px; background-color: ; margin-left:0px; margin-top:0px; opacity:1;border: 10px solid #F795A9;padding: 0px;}
.imagem2 img.top { opacity:1;}
.imagem2:hover img.top, .cf4.hover_effect img.top {opacity:0 ;border:1px dashed {color:bordaimg};-webkit-border-radius: 100px 100px 100px 100px;-webkit-transform: rotate(0deg);}
.imagem2:hover img.bottom, .cf4.hover_effect img.bottom {filter:gray}
E cole esse abaixo de <body>
<div class=”imagem2” class=”hover”>
<img class=”bottom shadow” src=”http://static.tumblr.com/kbesbrd/67fmmwmms/tumblr_mmt803je1z1rmo5pro1_1280.jpg”style=”-webkit-filter: grayscale(100%);” >
<img class=”top shadow” src=”http://static.tumblr.com/kbesbrd/67fmmwmms/tumblr_mmt803je1z1rmo5pro1_1280.jpg”></div>
</div>
É isso ,mude a url da foto pela qual você quer.
/Saah
Nenhum comentário:
Postar um comentário