Não sabe oque é efeito cool?? Clique aqui e confira!!
é bem simple... basta colar o código abaixo no seu css
.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;
}
Nenhum comentário:
Postar um comentário