Hooy gente bom vocês pediram bastante esse tutorial pra mim, por isso vou ensinar como fazer o efeito que eu uso na equipe do blog. E por falar em equipe, espero que estejam gostando das meninas que vão me ajudar a atualizar o blog
Sobre o tutorial, não tem nada demais. Primeiro vocês precisam criar duas imagens:
A 1° que será a imagem normal E a 2° que será a imagem em hover
Agora vá no seu HTML e cole esse código acima de ]]></b:skin>
.slide-up-boxes {width: 133px; display: inline-block; margin-left: 6px;}Visualize se estiver tudo ok (sem erros no HTML), salve.
.slide-up-boxes a {
display: block;
margin: 0 0 0px 0;
background: #fff;
height: 98px;
margin-bottom: 5px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 5px 2px -2px rgba(0,0,0,0.11);}
.slide-up-boxes h5 {
color: #937560;
text-align: center;
height: 109px;
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: -114px;
opacity: 0;}
.slide-up-boxes div
{position: relative;
color: #fff;
height: 114px;
padding: 5px;
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);}
Agora toda vez que quiser utilizar esse efeito use isso:
<div class="slide-up-boxes">
<a href="URL DO SITE">
<h5>
<img src="URL DA 1° IMAGEM" />
</h5>
<div>
<img src="URL DA 2° IMAGEM" />
</div></a></div>
Fácil né gente?! Espero que tenham gostado (:
Bye Bye ~
O efeito é lindo Jackie *-*
ResponderExcluirEsse efeito é muitoo lindo *-*
ResponderExcluirCtrl C + Ctrl V .. aushauh
Beeijinhoos
Aaah eu amei esse efeito mas eu ACABEI de colocar o novo lay no meu blog se não eu usaria ;)
ResponderExcluirMas é muuito lindo!
http://candy-village.blogspot.com.br/
Estou gostando das novas postadoras <3
ResponderExcluirGostei do efeito!
Jackie pooderia seguir?
Kissus^^
unicornio-voador.blogspot.com
É muito lindo esse feito (:
ResponderExcluirbeeijos;*
http://sooulteen.blogspot.com.br
Oh Jackie eu queria saber como é que faz esse efeito de quando abre o blog e as imagens vão indo para seu lugar.
ResponderExcluirportal-do-mundo.blogspot.com>>>>
Que liamdo *-*
ResponderExcluirperdidasnomundofashion.blogspot.com
Amei o tuto Jackie, sabe que eu tava pensando em procurar ele na net mesmo?!Até sonhei com ele, depois que vi ele no seu blog!!
ResponderExcluirBrigada Jackie. Beijos #May-Sun
layrakauana.blogspot.com
HUAHAUHAUAHAUH fico feliz que tenha gostado guria <3
ExcluirAh Jackie eu fiz, mais não funcionou.
ExcluirAcho que por que o meu blog não é do modelo viagem né?!
Mais mesmo assim eu amei, bj ^3^
Eu acho que é pq vc usa o código de mudar a seleção de texto, não sei pq ele está interferindo em outros códigos fazendo com que não funcionem :(
ExcluirSério então vou parar de usar o efeito agora mesmo, por que esse seu efeito é mais que divo <(U3U)>
ExcluirNo meu caso foi ele que tava interferindo, mas espero que dê certo pra ti tbm <3
ExcluirO Efeito fica muito legal! Adorei o tuto Jackie! ^^
ResponderExcluirBeijinhos, Paula! ♥
~Sweet Makeup~
(clica no perfil pra visitar meu blog)
jackie mais tipo , eu quero toda hora esse efeito e tambem não funcionou !!
ResponderExcluircomo assim toda hora?
ExcluirObrigada meu anjo quebrei a cabeça o dia todo hoje tentando fazer ele, rsrsrs vc leu meus pensamentos. O blog ta lindo.
ResponderExcluirMas Jackie, onde poe o nome da postadora?
ResponderExcluirna segunda imagem, quando vc editar ;D
ExcluirAmeeeeeeeei o tutorial, muito lindooo, estava louca para aprender!
ResponderExcluirBeijinhos cheios de gloss,
Giulia Walt.
modinhagirl.blogspot.com.br
Jackie amei seu blog, muito fofo *-*. Não quero ser chata, mas... Se tiver um tempinho da uma passadinha lá no meu ? : http://isannajuliaa.blogspot.com.br/
ResponderExcluirAchei q ficou super bonito esse efeito, gostei bastante. Quando agente acha q vc não pode fazer um layout melhor vc supera tudo e faz melhor do q os outros, ahsaushua.
ResponderExcluirPodia fazer um tutorial de como colocou as imagens dos postadores no final do post ;)
fashion em cores
A brigada Fran *--*
ExcluirEu também gostei muito desse meu atual layout mas sempre fico com a sensação de não ter ficado mais bonito que o antigo, acho que é paranoia né?
Enfim, acho que esse tutorial vai te ajudar olha só>> http://jovemousada.blogspot.com.br/2012/11/tutorial-colocar-imagem-do-autor-da.html
super explicadinho (foi o que usei aqui)... beijinhos Fran!
Nossa que efeito é esse?
ResponderExcluirSegui lá
http://teen-e-life.blogspot.com.br/
#-Býy
aaaaaaaaaaaaaaaaah, gostei desse efeito, fica mt lindo ;D
ResponderExcluirJackie, fiou perfeito! O tuto funciona certinho e fica tudo fofinho!! Quando colocar a equipe no blog, com certeza vou usar!
ResponderExcluirAgora, e esse design? Minha filha, você quer me matar só se for né? TÁ LINDO, PERFEITO, DIVO!!! Foio melhor design que você já fez, sério! E essa equipe sua ficou um show, todas as postadoras são super lindas e os posts delas são demais!!!
Jackie, deixa eu te falar... queria me desculpar pela minha ausência aqui no blog, mas é que eu não tenho tempo!!! Mas eu passo aqui todo dia para ver as atualizações e queria dizer que você está super de parabéns, viu???
Eu sou uma Jackie Dreamer (hã?) de s2!!!
Bezos, Gabi Sena // gabi-sena.blogspot.com
AAAAAAAAAAH BRIGADA GABI *--*
ExcluirEu tbm adorei meu novo lay e a meninas que fazem parte da equipe realmente são incríveis :p
Obrigada por ser tão fofa comigo, minha Jackie Dreamer oficial (:
eu quero esse efeito sempre que alguem entrar no meu blog !! como faço ??
ResponderExcluir? ué, não entendi ?
ExcluirHeey! Esse efeito é demias, tava procurando umdesses á um temPÃO!
ResponderExcluirXOXO
http://comentariosde1garotaqualquer.blogspot.com.br/
Amei,vou postar no meu blog,com créditos,é claro.
ResponderExcluirblog-j-a.blogspot.com.br
assim amor que nem eu to entrando no seu blog muito perfeito e ta funcionando direitinho , como faço pra funcionar automatico ??
ResponderExcluirÉ só seguir o tutorial uai (:
ExcluirJackie, não consegui fazer direito. Entendi a parte de colar no HTML o primeiro código, mas o que faço com o segundo? Se puder responder, obrigada! (:
ResponderExcluirO segundo é o código que faz o efeito aparecer amr... Tipo vc pode colar em algum HTML java script (:
ExcluirAtaa! Obrigada Jackie. Adoro o blog! (:
ExcluirJackie, tipo, para colocar esse efeito nas imagens do post se usa o mesmo código ou muda algo?
ResponderExcluirBeijos ;*
http://cenariumfashion.blogspot.com.br
O mesmo código!
ExcluirMais você tem que repetir ele toda vez que quiser o efeito tá?
Jackie eu n entendi a parte do url da imagem como assim aonde salva?
ResponderExcluirwonderland-ofgirls.blogspot.com.br (está em reforma)
amr não tem que salvar nada, vc só precisa colar a url da imagem nos locais indicados tá?
Excluirnaum funcionou to mt triste :( oq sera q eu devo ter errado? eu noa entendi a parte do url do site!
ResponderExcluirSe o seu css tá carregado de códigos aí não funciona msm :c
ExcluirAmr a url do site vc coloca se quiser não é obrigatório ok?
Este comentário foi removido pelo autor.
Excluirjackie como vc faiz pra ficar alinhadinho em quatro olha só no meu blog nao ficou direito
ResponderExcluirhttp://fofocasmonsterhighloves.blogspot.com.br/
nem as imagens estao certas oq sera q aconteceu?
Oie me apaixonei pelo efeito fui tentar fazer, mais ele corta parte da imagem (embaixo) e deixa sobrando um branco (em cima) eu acho que tem que ter algum problema de ajuste..(na minha opinião por que eu não entendo muito bem de código ehehe) se tiver um palpite ou até mesmo uma solução pra eu poder aproveitar esse efeito lindo ficarei muuito grata meesmo!! Beijos AMO seu blog!!
ResponderExcluirhttp://atitudesdegarotaoficial.blogspot.com.br/
então o meu problema é igual ao da Jubs (comentário acima) mais isso é por causa que tem que ajustar a largura e a altura da imagem .. tenho certeza que é isso, mais como eu também não sei mexer muito com HTML não conseguiu solucionar o problema :(
ResponderExcluirobrigada pela atenção Vick
apenasprincesinha.blogspot.com
Jackie o segundo codigo me confundiu eu sei que tem que colocar em um HTML java etc então mais que url de segunda imagem ??
ResponderExcluirSeria essa>> http://i.imgur.com/xoLxc.png
ExcluirNão funcionou Y.Y
ResponderExcluirEsse efeito é lindo, eu tentei tentei e não funcionou O_o!!!
ResponderExcluirOnde q cola o 2 codigo??
ResponderExcluirMto obrigadah!
Onde você quer usar o efeito.
ExcluirPode ser em uma página do blog(na aba HTML) ou na sidebar(como HTMLjavascript)...
Qualquer dúvida eu explico mais detalhado tá?
jakie ñ consegui pq??
ResponderExcluirpq vc está fazendo algo errado :c
ExcluirTentei fazer já umas 4/5 vezes e não consegui! Me Ajuda?
ResponderExcluirOI jackie como faz pra ficar maior? pq fica cortando mesmo eu aumentando a altura e a largura *u*
ResponderExcluirvc tem que ajustar no html do cod (dá um trabalho)
Excluireu por exemplo ajustei do tamanho que eu uso (: