Efeito Hover para Imagens

Efeito Hover para Imagens


HTML

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Exemplo Efeito Hover</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <div class="container">  
  10.   <ul class="conteudo_01">  
  11.     <li> <a href="#"><img src="imagens/ferrara_01.jpg" alt="Ferrara" title="Ferrara"></a>  
  12.       <div class="caption">  
  13.         <div class="efeito"></div>  
  14.         <div class="caption-texto">  
  15.           <h1>Ferrara</h1>  
  16.           <p>Cidade medieval italiana</p>  
  17.         </div>  
  18.       </div>  
  19.     </li>  
  20.     <li> <a href="#"><img src="imagens/bergamo_01.jpg" alt="Bergamo" title="Bergamo"></a>  
  21.       <div class="caption">  
  22.         <div class="efeito"></div>  
  23.         <div class="caption-texto">  
  24.           <h1>Bergamo</h1>  
  25.           <p>Cidade medieval italiana</p>  
  26.         </div>  
  27.       </div>  
  28.     </li>  
  29.   </ul>  
  30. </div>  
  31. </body>  
  32. </html>  

Veja sua página no navegador

Artigo 34 - 01

HTML

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Exemplo Efeito Hover</title>  
  6. <link href="css/meu_efeito.css" rel="stylesheet" type="text/css">  
  7. </head>  
  8.   
  9. <body>  
  10. <div class="container">  

CSS

  1. @charset "utf-8";  
  2. /* CSS Document */  
  3.   
  4. .container {  
  5.     width: 800px;  
  6.     margin: 0 auto;  
  7. }  
  8. .conteudo_01 {  
  9.     list-style-type: none;  
  10.     margin: 0px;  
  11.     padding: 0px;  
  12. }  
  13. .conteudo_01 li {  
  14.     float: left;  
  15.     width: 360px;  
  16.     height: auto;  
  17.     position: relative;  
  18.     overflow: hidden;  
  19.     
  20. }  

Veja sua página no navegador

Artigo 34 - 02

CSS

  1. /* Hover */  
  2.   
  3. .conteudo_01 li:hover .caption {  
  4.     opacity: 1;  
  5. }  
  6. .conteudo_01 img {  
  7.     width: 320px;  
  8.     height: 300px;  
  9.     padding: 10px;  
  10.     margin: 10px;  
  11.     background: #CCC;  
  12.         border:10px solid #EAEAEA;  
  13.     float: left;  
  14.     z-index: 4;  
  15. }  
  16. .conteudo_01 .caption {  
  17.     cursor: pointer;  
  18.     position: absolute;  
  19.     opacity: 0;  
  20.     -webkit-transition: all 0.5s ease-in;  
  21.     -moz-transition: all 0.5s ease-in;  
  22.     -o-transition: all 0.5s ease-in;  
  23.     -ms-transition: all 0.5s ease-in;  
  24.     transition: all 0.5s ease-in;  
  25. }  

Veja sua página no navegador

Artigo 33 - 03

CSS

  1. /* efeito blur */  
  2.   
  3. .conteudo_01 .efeito {  
  4.     background-color: rgba(3,178,200,0.65);  
  5.     width: 340px;  
  6.     height: 320px;  
  7.     margin: 10px;  
  8.     z-index: 5;  
  9.     position: absolute;  
  10. }  
  11. .conteudo_01 .caption-texto h1 {  
  12.     text-transform: uppercase;  
  13.     font-size: 24px;  
  14. }  
  15. .conteudo_01 .caption-texto {  
  16.     z-index: 10;  
  17.     color: #FFF;  
  18.     font-size: 18px;  
  19.     position: absolute;  
  20.     width: 360px;  
  21.     height: 320px;  
  22.     text-align: center;  
  23.     top: 100px;  
  24. }  

Veja sua página no navegador

Artigo 34 - 04

 





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