Antes que eu me esqueça, vocês acham que já esta na hora de eu mudar de layout? Minha cabeça esta formigando com algumas ideias um tanto, inovadoras. Mas, ainda gosto tanto desse... vamos esperar não é mesmo?
Trouxe para vocês um tutorial de um efeito muito lindo que eu achei lá no Things To Help You. Então, se usarem creditem á eles ok?
1º Devemos fazer duas imagens, uma sem o mouse por cima e outra com(efeito hover).
Eu fiz estas daqui:
2º Depois, cole isto no seu CSS:
.slide-up-boxes h5 {color: #937560;text-align: center;height: 190px;text-shadow: 1px 1px 0px #eee;letter-spacing: 5px;text-transform: uppercase;font: normal 11px/104px Arial;opacity: 1;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;}.slide-up-boxes a:hover h5 {margin-top: -200px;opacity: 0;}.slide-up-boxes div{position: relative;color: #fff;height: 190px;padding: 0px;opacity: 0;-webkit-transform: rotate(6deg);-webkit-transition: all 0.4s linear;-moz-transform: rotate(6deg);-moz-transition: all 0.4s linear;-o-transform: rotate(6deg);-o-transition: all 0.4s linear;text-decoration: none;}.slide-up-boxes a:hover div {opacity: 1;-webkit-transform: rotate(0);-moz-transform: rotate(0);-o-transform: rotate(0);}
Entendendo o código:
A class slide-up-boxes é o tamanho do local onde a minha boxzinha vai ficar. Ou seja, você pode dar o valor que sua imagem tem ou um valor maior. Isso você tem que descobrir tentando. Coloquei um display: inline-block para que a div ficasse uma ao lado da outra, CASO o espaço onde ela esteja caiba. É sempre bom arriscar, então arrisque. x3
A segunda class slide-up-boxes a, é onde determinamos o height da nossa imagem, então a minha imagem tem 104 de altura, então já determinei ali.
A class slide-up-boxes h5, é a class onde ficaria algo escrito, então ela deve ter o mesmo valor no height da sua imagem. Nessa class h5, temos um font: italic 18px/104px Georgia, Serif; a primeira numeração é o valor da fonte, o tamanho da nossa fonte, o segundo valor é o line-height então definimos o mesmo valor do height para que fique no centro.
A próxima class que é a h5 hover, temos um margin ali certo? Ele esta em negativo, ou seja, tem um menos antes da numeração. Note que o menus é o valor é o height da nossa imagem, então quando fizer com sua imagem determine o margin em negativo para que a imagem possa subir e aparecer. Bom depois disso, você não precisa mexer em nada, apenas nos valores mesmo. Pode usar um transition mais lento, caso queira.
3º Agora, copie este código e cole um gadget de HTML/Javascript:
<div class="slide-up-boxes">
<a href="OLINK">
<h5>
<img src="SUA_IMAGEM">
</h5>
<div>
<img src="SUA_IMAGEM">
</div></div>
</a>
Apenas isto! Ele é bem fácil, mas extenso e exige atenção. Novamente, os créditos ao Tumblr Things To Help You! Muito obrigada suas fofas ^U^
Espero que tenham gostado!
Bjs ^_^
sdds férias sdds -q Que venha \õ
ResponderExcluirO efeito é lindo, gamei nele talvez eu use >3<
Pois é rçrçr Chega de escola por este mês -n
ExcluirAwn obrigada *u*
Adorei o efeito: é simples mas é muito legal
ResponderExcluirBeijos
Sim, obrigada ^u^
ExcluirBjs ^_^
Ótimo efeito, amo efeitinhos assim, talvez eu use² Ferias sdds mesmo, kkk, não gosto muito das aulas de espanhol, a professora só libera 20min depois, pq ela disse que só tem uma aula por semana TT_TT
ResponderExcluirChu~
mutant-paradise.blogspot.com
Eu também *u* Lindo demais ;3
ExcluirMinha aula de espanhol só dura uma hora KKK' É toda terça e quinta a tarde T^T
Bjs ^_^
Nossa o efeito é muitoo lindoo
ResponderExcluirVeja>>http://euamotutoriais.blogspot.com.br/
Obrigada e, seja mais sútil na próxima ;)
ExcluirLindo blog! Estou seguindo.. pecadosfeminino.blogspot.com
ResponderExcluirFérias vem ni mim rs' amei o efeito muito divo, salevi nos meu favoritos
ResponderExcluirxoxooh~
Daily-whin.blogspot.com
Oi!Seu blog recebeu uma tag!
ResponderExcluirhttp://lovemonsterhighbylala.blogspot.com.br/2013/06/tag.html
Bjs!
Aceita elite? responda em meu blog http://diarioboy-boy.blogspot.com.br/
ResponderExcluir