11 de março de 2014

Tutorial: Hover imagem com descrição



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">
<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>
• E o CSS:
#efeito-img{
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
}
• Como fica:

efeito hover com descrição
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

8 comentários

  1. Gostei do tutorial, tentei fazer e deu super certo.
    infinitafeminice.blogspot.com

    ResponderExcluir
  2. Nossa que legal o tutorial! E essa imagem super fofa? Amei! *-*

    http://leitecombiscotos.blogspot.com.br/

    ResponderExcluir
  3. O tuto ficou demais. O melhor é que as letras da imagem podem ser selecionadas ou com link.

    Beijoos mil!
    Meu Skate Rosa - Visite

    ResponderExcluir
  4. Adorei o tutorial !
    Beijos , http://sdviver.blogspot.com.br/

    ResponderExcluir
  5. Muuuito legal esse efeito. E achei mega simples o tutorial. Você ensina muito beeeem

    http://www.beggarfashion.com/

    ResponderExcluir
  6. Amei o efeito! Acho mt bonito, pois deixa o layout com cara de profissional ;D
    Bjs,

    Pode fazer uma visitinha em meu blog?
    Tem post novo ^-^ http://bsaccani.blogspot.com.br/

    ResponderExcluir
  7. Que legal, adorei a dica.

    Beijos

    Jéssica
    Fashion Jacket - www.fashionjacket.com.br

    ResponderExcluir
  8. gente, o que é marcação de html ? asygaysg e css?

    ResponderExcluir

BLOG UNTIL WE DIE | TODOS OS DIREITOS RESERVADOS 2014-2015 © | DESIGN E DESENVOLVIMENTO: SANYT DESIGN