Hoje eu vou ensinar para vocês como fazer efeito hover imagem com descrição.
Hover é quando você passa o mouse em cima de algum item em uma página web e ele muda de cor, fonte, etc.
Então, quando você passar o mouse em cima da imagem, irá aparecer um texto de sua preferência.
• Primeiro você terá que fazer a marcação em HTML:
<div id="efeito-img">• E o CSS:
<img src="URL DA IMAGEM" alt="efeito hover imagem com descrição" />
</div>
<div class="desc-efeito">Oat cake marshmallow ice cream fruitcake pie bear claw sugar plum croissant lollipop. Ice cream applicake wafer jelly-o chocolate bar halvah chocolate bar fruitcake tootsie roll. Candy marshmallow</div>
#efeito-img{• Como fica:
width: 218px; /*largura da imagem*/
height: 218px; /*altura da imagem*/
}
.desc-efeito{
width: 197px;/*largura do hover*/
height: 118px;/*altura do hover*/
padding: 50px 10px;
opacity: 0;
z-index: 9999;
margin-top: -218px;
cursor: pointer;
color: #000;/*cor da letra*/
font-size: 13px;/*tamanho da letra*/
font-weight: 700;
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s
}
.desc-efeito:hover{
background: #cba219;/*cor do fundo da descrição*/
opacity: 0.9;
position: relative;
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s
}
Oat cake marshmallow ice cream fruitcake pie bear claw sugar plum croissant lollipop. Ice cream applicake wafer jelly-o chocolate bar halvah chocolate bar fruitcake tootsie roll. Candy marshmallow
Gostei do tutorial, tentei fazer e deu super certo.
ResponderExcluirinfinitafeminice.blogspot.com
Nossa que legal o tutorial! E essa imagem super fofa? Amei! *-*
ResponderExcluirhttp://leitecombiscotos.blogspot.com.br/
O tuto ficou demais. O melhor é que as letras da imagem podem ser selecionadas ou com link.
ResponderExcluirBeijoos mil!
Meu Skate Rosa - Visite
Adorei o tutorial !
ResponderExcluirBeijos , http://sdviver.blogspot.com.br/
Muuuito legal esse efeito. E achei mega simples o tutorial. Você ensina muito beeeem
ResponderExcluirhttp://www.beggarfashion.com/
Amei o efeito! Acho mt bonito, pois deixa o layout com cara de profissional ;D
ResponderExcluirBjs,
Pode fazer uma visitinha em meu blog?
Tem post novo ^-^ http://bsaccani.blogspot.com.br/
Que legal, adorei a dica.
ResponderExcluirBeijos
Jéssica
Fashion Jacket - www.fashionjacket.com.br
gente, o que é marcação de html ? asygaysg e css?
ResponderExcluir