Efeitos originais usando CSS

As possibilidades de CSS3 estão apenas começando a ser aplicada e de alguma forma, são infinitas. As opções são muitas e, geralmente, bastan...

As possibilidades de CSS3 estão apenas começando a ser aplicada e de alguma forma, são infinitas. As opções são muitas e, geralmente, bastante simples de implementar. Neste caso, Gemm@ nos mostra como fazer uma série de efeitos originais criados por codrops. Aqui, eu vou tentar reproduzir um deles, mas o resto pode ser visto no demo online ou download diretamente para seu PC.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.

Todos eles têm uma estrutura similar; dentro de um DIV com alguma classe CSS (view), adicione uma imagem cujo tamanho define o resto das propriedades e, em seguida, outra DIV que permanecerá oculta (mask) e cujo conteúdo pode ser variável.

<div class="view">
<img src="URL_IMAGEM" />
<div class="mask">
<h4> o título </h4>
<p> o trexto </p>
<a href="#" class="info"> LER MAIS </a>
</div>

Obviamente, o CSS é o que importa e é ... tempo, porque, infelizmente, terá repetir muitas propriedades já que os navegadores, ainda não decidiram por unificá-los.

<style>
.view { /* DIV principal damos a mesma dimensão da imagem a usar, nesse caso, 300 x 188 */
border: 10px solid #FFF;
cursor: pointer;
height: 188px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
width: 300px;
}
.view img { /* a imagem */
display: block;
position: relative;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img { /* se "anima quando passamos o mouse em cima */
-moz-transform: rotate(720deg) scale(0);
-webkit-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask { /*  DIV oculta com os textos */
background-color: #ABC;
height: 188px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: 300px;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask { /* DIV é mostrado */
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);
}
.view h4 { /* o título permanece oculto */
background-color: rgba(255, 255, 255, 0.5);
color: #FFF;
text-align: center;
position: relative;
font-family: Georgia;
font-size: 20px;
margin: 20px 0 0 0;
padding: 5px 0;
text-shadow: 0 3px 1px #000;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 { /* título é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p { /* o texto permanece oculto */
color: #000;
font-family: Tahoma;
font-size: 13px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px #FFF;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p { /* texto é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info { /* o link permanece oculto */
background-color: #456;
border-radius: 5px;
box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
color: #FFF;
display: inline-block;
padding: 7px 14px;
text-decoration: none;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #FFF;
}
.view:hover a.info { /* link é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
</style>

estilos com estilo

Vivamus ultrices enim ac ante commodo et interdum odio pulvinar! Duis vel nisl at sapien luctus tincidunt. Mauris in erat risus, id euismod felis.
LER MAIS