Ohayooo bunnie's! Venho trazer mais um efeito para vocês ele se chama Cool Shadow, achei lá no blog Chá com Anjos,então créditos entregues. O efeito é um jogo de sombras, com bordas fica muito bonito sabendo onde aplicar, para quem desejar ver o exemplo basta clicar no link que estará mais abaixo, se gostou siga o tutorial.
Códigos
.view {
width: 160px;
height: 160px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 160px;
height: 160px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.oefeito img {
opacity:0.2;
transition-duration: 60s; -webkit-transition-duration: .60s;
}
.oefeito .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border: 80px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition-duration: 60s; -webkit-transition-duration: .60s;
}
.oefeito:hover .mask {
border:0px double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.oefeito:hover img {
opacity:1;
}
width: 160px;
height: 160px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 160px;
height: 160px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.oefeito img {
opacity:0.2;
transition-duration: 60s; -webkit-transition-duration: .60s;
}
.oefeito .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border: 80px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition-duration: 60s; -webkit-transition-duration: .60s;
}
.oefeito:hover .mask {
border:0px double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.oefeito:hover img {
opacity:1;
}
# Os “widths” e “heights” (em negrito) devem ser alterados de acordo com o tamanho da imagem que você quer aplicar o efeito.
# As duas cores em RGBA (também em negrito) você deve mudar para a cor que ficará antes do hover, no caso está em preto. Mas deve ser em rgba, se for em hex pode ficar sem a opacidade.
Códigos
<div class="view oefeito">
<a href="#"><img src="LINK DA IMAGEM" /></a>
<div class="mask"></div>
</div>
<div class="view oefeito">
<a href="#"><img src="LINK DA IMAGEM" /></a>
<div class="mask"></div>
</div>
<div class="view oefeito">
<a href="#"><img src="LINK DA IMAGEM" /></a>
<div class="mask"></div>
</div>
<a href="#"><img src="LINK DA IMAGEM" /></a>
<div class="mask"></div>
</div>
<div class="view oefeito">
<a href="#"><img src="LINK DA IMAGEM" /></a>
<div class="mask"></div>
</div>
<div class="view oefeito">
<a href="#"><img src="LINK DA IMAGEM" /></a>
<div class="mask"></div>
</div>
Salve e prontinho!
Nenhum comentário:
Postar um comentário