Trouxe um tutorial muito lindo que vi no Cantinho HTML. O efeito é assim, quando você passa
o mouse sobre um foto aparece um legenda muito fofa. Fica maravilhoso na elite de afiliados.
No seu HTML e procure por ]]></b:skin> acima dessa tag, coloque:
@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/qbzesex/2tSm7y7gy/04b_03_.ttf'); format("truetype");}imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 2px 2px 0;}captioon {position: absolute; background: #000; color: #fff; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 8px; font-family: "04b03", small-fonts; text-shadow: 1px 1px 3px #000;}imagem:hover captioon {opacity: 0.75;}imagem:hover:before {opacity: 0;}.caption:before {bottom: 10px; right: 10px;}.caption captioon {bottom: 3px; right: 30%;}.caption:hover captioon {right: 0px;}
O 2 é o tamanho do espaço entre um imagem e outra. O 000, é a cor do fundo da legenda. O fff, representa a cor da fonte. Altere e salve.
Crie um gadget HTML/Javascript e nele, cole:
<imagem class="caption"><img src="LINK DA IMAGEM" /><captioon>Legenda Aqui</captioon></imagem>
Kissus
Nenhum comentário:
Postar um comentário
- Este espaço é todo seu. Tire suas dúvidas!
- Por favor, Não faça algum request pelos comentários,
para isso serve a Ask.
- Se não gostou de algo, não use palavras baixas. Ninguém precisa se rebaixar tanto para expressar uma opinião.
- Leio todos os comentários e retribuo todos.
-Thanks