Descrição aparecendo ao passar o mouse numa foto.
Descrição aparecendo ao passar o mouse numa foto.
O código é simples, mas exige atenção. Conforme pedidos, eu resolvi postá-lo.
Lembrando que eu não criei esse código, apenas o adaptei. Ao final desse tutorial tem os créditos de quem o fez.
Cole isso antes de </style>
Explicação rápida onde pode se alterar:
- Em .frase-ht
- Você pode observar que height: 250px; se repete diversas vezes no código. É a altura da imagem, você pode redimensioná-la para mais ou para menos, aumentando ou diminuindo o valor. Mas se você não tem muia afinidade com html, não edite.
- A fonte está em tahoma, 11px, de cor color: #555555; (um cinza, pra ser mais exata). Pode alterar se preferir, mas não coloque tamanho maior do que 12px, vai ficar feio.
- A cor do background é determinada nisso: background-color: #FFFFFF; Altere apenas se a cor da caixa da tua sidebar for de outra cor. Não coloque imagens.
2. Em #slide01
- Altere apenas o width:260px; ele é o tamanho da sua foto. Você pode redimensioná-lo para mais ou para menos, aumentando ou diminuindo o valor. Mas se você não tem muia afinidade com html, não edite.
3. Em slide02 img
- Altere apenas o width: 250px; ele é o tamanho da sua foto. Você pode redimensioná-lo para mais ou para menos, aumentando ou diminuindo o valor. Mas se você não tem muia afinidade com html, não edite.
4. Em slide03 img
- Altere o width: 250px; ele é o tamanho da sua foto. Altere tambem o height: 309px; que é a altura da foto. Você pode redimensioná-los para mais ou para menos, aumentando ou diminuindo o valor. Mas se você não tem muia afinidade com html, não edite.
Importante: Não altere nada além disso, e nao mexa nos códigos de #slide02; #slide02:hover; #slide03.
Depois, cole isso depois de <body>
Altere com o link da tua imagem.
5. Na sidebar.
- Dentro da tua sidebar (após o codigo da caixa, geralmente representado por box, caixa) coloque: <div class=”frase-ht”> COLA TEU TEXTO</div> (reponha as aspas, ou seja, apague essas e coloque outras)
Foi util? Credite.
Gostou? Dê like.
Não reblogue!
Código original por l-oveyourself, adaptação e tutorial por havingthemes.
/angie
