Efeitos 2

Preview: (xxx)

Bom amores, venho trazer esse efeito super maneiro. Esse tutorial foi tirado do cssdeck e traduzido por mim para postar para vocês. Ele é super engraçadinho e por mais que tenha código ele é simples, então eu dei uma “incrementada” nele para que possam usar com parceiros ou ate mesmo se vocês preferirem com moderadores e etc…Bom, já viram o preview e eu já disse de onde o tirei, agora é hora do tutorial. Não se esqueçam de dar like (♥) e creditar.
1- Cole esse código abaixo no css:

ddiv.image {
 position: relative;
 overflow: hidden;
 width: 150px;
 height: 150px;
 display: inline-block;
 margin-right: 15px;
 margin-bottom: 15px;
 
 box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.3);
}

img {
 position: absolute;
 left: 0;
 top: 0;
 
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
 -o-transition: all .3s ease-out;
 transition: all .3s ease-out;
}

span.title {
 width: 150px;
 height: 20px;
 position: absolute;
 background: rgba(30,30,30,0.9);
 text-align: center;
 padding: 5px 0 4px;
 font-size: 14px;
 color: white;
 font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
 
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
 -o-transition: all .3s ease-out;
 transition: all .3s ease-out;
 
}


.linkzinho {background:rgba(255,255,255, 0.0);padding:10px;color:#ff0066;border-radius:5px;font-family:'ABeeZee', sans-serif;font-size:9px;}

parceiro {background:rgba(255,255,255, 0.3);padding:2px;color:#fff;border-radius:1px;font-family:'ABeeZee', sans-serif;font-size:15px;margin-top:5px;margin-bottom:10px;}


div.image.revealUpFull span { 
 height: 141px;
 width: 150px;
 bottom: -120px;
}

div.image.revealUpFull:hover img {
 top: -150px;
}

div.image.revealUpFull:hover span {
 bottom: 0px;
}

2- Agora, escolha o lugar onde você quer que o efeito apareça e cole esse código:

<div class="image revealUpFull">
  <img src="https://31.media.tumblr.com/aa1c7cb33a33c1a197b5d661e14e53e9/tumblr_inline_mxtfgmPDqA1rwneo8.png" width="150px" height="150px" />
  <span class="title">Parceiro <br/><br>
  <parceiro>Nome aqui</parceiro><br>
  <br/> <a href="LINK_DO_PARCEIRO" class="linkzinho">Não encontrou o que deseja aqui? Clique e visite um de nossos parceiros</a></span>
 </div>

<div class="image revealUpFull">
  <img src="https://31.media.tumblr.com/97027233299b672a71a12a99cfd5cef4/tumblr_inline_myunuyld5F1rwneo8.png" width="150px" height="150px" />
  <span class="title">Parceiro <br/><br>
  <parceiro>Nome aqui</parceiro><br>
  <br/> <a href="LINK_DO_PARCEIRO" class="linkzinho">Não encontrou o que deseja aqui? Clique e visite um de nossos parceiros</a></span>
 </div>


<div class="image revealUpFull">
  <img src="https://31.media.tumblr.com/91e1e51430f20ffb56f9663d38bc776a/tumblr_inline_mxtelnaVD31rwneo8.png" width="150px" height="150px" />
  <span class="title">Parceiro <br/><br>
  <parceiro>Nome aqui</parceiro><br>
  <br/> <a href="LINK_DO_PARCEIRO" class="linkzinho">Não encontrou o que deseja aqui? Clique e visite um de nossos parceiros</a></span>
 </div>
 
 <div class="image revealUpFull">
  <img src="http://media.tumblr.com/d999b7973e330d1f4dfd153e4b3c4db5/tumblr_inline_mwkor8esqm1rwneo8.png" width="150px" height="150px" />
  <span class="title">Parceiro <br/><br>
  <parceiro>Nome aqui</parceiro><br>
  <br/> <a href="LINK_DO_PARCEIRO" class="linkzinho">Não encontrou o que deseja aqui? Clique e visite um de nossos parceiros</a></span>
 </div>

Viram? Super fácil. Ai no lugar onde se pede o link de parceiro você coloca a URL do parceiro, onde pedir o nome vc tbm faz. Recomendo que não mexa no CSS se não souber CSS. Pode mudar a imagem e fazerem o que quiser, só tome cuidado para não da pite no efeito. Espero que tenham gostado e Se for útil de like (♥) e crédite.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Preview: (xxx)

Oi anjos, hoje vou ensinar o efeito Flopagem. rsrsrs o nome é meio feio mas o efeito é simples e fofinho, é como se fosse um efeito opacity. Bom, chega de enrolação e vamos lá.
1- Cole esse código no CSS:

.subindo {overflow: hidden;}
.borderparceiros {border-radius:70px}
.subindo a{opacity:0.50;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;-o-transition: all 0.s ease;;}
.subindo a:hover {opacity:1.50;}

2- Agora, cole o código abaixo onde você deseja que o efeito apareça:

<div class="subindo">
<center>
<a href="LINK_AQUI"><img src="http://media.tumblr.com/c0656052e5e14def2623d05f5c5a518a/tumblr_inline_muzff3JT6Z1rwneo8.png" width="50px" ></a>
<a href="LINK_AQUI"><img src="http://media.tumblr.com/0401f8acfe6b7ecd80ac1ae94d2fbf90/tumblr_inline_muzf2ngIHy1rwneo8.png" width="50px"></a>
<a href="LINK_AQUI"><img src="http://media.tumblr.com/e340a1ccbf0d1cc9de4759e1af5f3245/tumblr_inline_muzff7DGAH1rwneo8.png" width="50px" ></a>
<a href="LINK_AQUI"><img src="http://media.tumblr.com/e9f059cd01dfed9995ce31acbbf7338a/tumblr_inline_muzf2o5hyJ1rwneo8.png" width="50px"></a>
<a href="LINK_AQUI"><img src="http://media.tumblr.com/84b2a0fc26c13f012d4b48c5431ba09f/tumblr_inline_muzfhzq89n1rwneo8.png" width="50px" ></a>
<a href="LINK_AQUI"><img src="http://media.tumblr.com/7299812f04c88bb538e690def1548b22/tumblr_inline_muzf2ssTMZ1rwneo8.png" width="50px" ></a>
<a href="LINK_AQUI"><img src="http://media.tumblr.com/0ee0ca2953a81881559e798d2b0f51b5/tumblr_inline_muzffi70ZD1rwneo8.png" width="50px"></a>
<a href="LINK_AQUI"><img src="http://media.tumblr.com/2be9661eb5ccc8fd34c21b714208ce55/tumblr_inline_muzf2uOZ9O1rwneo8.png" width="50px"></a>
<a href="LINK_AQUI"><img src="http://media.tumblr.com/3ba20bc8d898d1ce0d4a55acd018adc1/tumblr_inline_muzff5aW3d1rwneo8.png" width="50px"></a>
</center>
</div>

Onde esta LINK_AQUI vocês trocam pela URL que desejam, troque a URL da imagem pela que quer também e faça bom uso.
Se for útil de like (♥) e credite, obrigada. {Jess}

Compartilhar :

Tweet

✚

Postagens Relacionadas