Efeito de Transição CSS3 para Imagens

Efeito de Transição CSS3 para Imagens
Passe o mouse sobre o texto "TERNO" e veja o efeito de transição

Terno 01

O estilo contemporaneo do terno 01 foi fabricado pela empresa Y.

Preço : R$ 2.000,00

Terno 02

O estilo moderno do terno 02 foi fabricado pela empresa Z.

Preço : R$ 1.200,00

Terno 03

O estilo casual do terno 03 foi fabricado pela empresa X.

Preço : R$ 800,00

HTML

  1. <section id="ternos">  
  2.   
  3.   <div class="retangulo"> <img src="../_imagens/terno_01.jpg">  
  4.     <div class="info">  
  5.       <h2>Terno 01</h2>  
  6.       <p>O estilo comtemporaneo do terno 01 foi fabricado pela empresa Y.</p>  
  7.       <p>Preço : R$ 2.000,00</p>  
  8.     </div>  
  9.   </div>  
  10.   
  11.   <div class="retangulo"> <img src="../_imagens/terno_02.jpg">  
  12.     <div class="info">  
  13.       <h2>Terno 02</h2>  
  14.       <p>O estilo moderno do terno 02 foi fabricado pela empresa Z.</p>  
  15.       <p>Preço : R$ 1.200,00</p>  
  16.     </div>  
  17.   </div>  
  18.   
  19.   <div class="retangulo"> <img src="../_imagens/terno_03.jpg">  
  20.     <div class="info">  
  21.       <h2>Terno 03</h2>  
  22.       <p>O estilo casual do terno 03 foi fabricado pela empresa X.</p>  
  23.       <p>Preço : R$ 800,00</p>  
  24.     </div>  
  25.   </div>  
  26.   
  27. </section>  

HTML

  1. <link href="roupas.css" rel="stylesheet" type="text/css">  

CSS

  1. #ternos {  
  2.     float: left;  
  3.     width: 700px;  
  4.     background-color: #E5E5E5;  
  5.     margin: 10px;  
  6.     padding: 10px;  
  7. }  
  8. .retangulo {  
  9.     float: left;  
  10.     position: relative;  
  11.     width: 28.73%;  
  12.     height: 204px;  
  13.     border: 5px solid #C90;  
  14.     margin: 10px;  
  15. }  

Painel 01
Painel 01

CSS

  1. .info {  
  2.     float: left;  
  3.     position: absolute;  
  4.     background-color: #C90;  
  5.     opacity: 0.7;  
  6.     color: #FFF;  
  7.     font-family: Georgia, "Times New Roman", Times, serif;  
  8.     font-weight: bold;  
  9.     width: 230px;  
  10.     height: 194px;  
  11.     padding: 5px;  
  12.     top: 160px;  
  13. }  

Painel 02
Painel 02

CSS

  1. #ternos {  
  2.     float: left;  
  3.     width: 700px;  
  4.     background-color: #E5E5E5;  
  5.     margin: 10px;  
  6.     padding: 10px;  
  7. }  
  8. .retangulo {  
  9.     float: left;  
  10.     position: relative;  
  11.     width: 28.73%;  
  12.     height: 204px;  
  13.     border: 5px solid #C90;  
  14.     margin: 10px;  
  15.     overflow: hidden;  
  16. }  
  17. .info {  
  18.     float: left;  
  19.     position: absolute;  
  20.     background-color: #C90;  
  21.     opacity: 0.7;  
  22.     color: #FFF;  
  23.     font-family: Georgia, "Times New Roman", Times, serif;  
  24.     font-weight: bold;  
  25.     width: 230px;  
  26.     height: 194px;  
  27.     padding: 5px;  
  28.     top: 160px;  
  29. }  
  30.   
  31. .info h2 {  
  32.     color: #FFF;  
  33.     font-size: 18px;  
  34.     font-weight: bold;  
  35.     text-transform: uppercase;  
  36. }  

Painel 03
Painel 03

Efeito de Transição

CSS

  1. .info:hover {  
  2.     top: 0px;  
  3.     -webkit-transition: all 1s linear .5s;  
  4.     -moz-transition: all 1s linear .5s;  
  5.     -ms-transition: all 1s linear .5s;  
  6.     -o-transition: all 1s linear .5s;  
  7.     transition: all 1s linear .5s;  
  8. }  





Beto Marques

Beto MarquesWebdesigner e Consultor desde 1997. Desenvolveu vários Sites, Cursos, Tutoriais e Ebooks sobre Webdesign.

Como consultor já treinou várias empresas e dentre seus trabalhos , se destaca Treinamento de FrontPage e Flash para o Departamento de Computação Gráfica - TV Globo - Projac.


Voltar ao Topo