Discover Top Posts Tagged with #efeito imagem

EFEITO PULSAR

Leia tudo com atenção para não errar na hora de fazer.

VISUALIZAÇÃO O EFEITO CLICANDO AQUI Para esse código funcionar você vai ter que colar:

E ESSE CÓDIGO ANTES DE </style>

E ESSE CÓDIGO DEPOIS DE <body>

PS: EU COLOQUEI O TAMANHO DE 150PX POR 140PX; SE QUISER PODE AUMENTAR OU DIMINUIR.

NO CÓDIGO 2 TROQUE A PALAVRA“URL DA IMAGEM”PELA URL DA SUA IMAGEM.

Prontinho, espero que seja útil para você.

#EFEITO PULSAR #efeito pulsar #efeito para imagens #efeito imagens #efeito imagem #image effect #effect images #efeitos css #efeito css #efeito #efeito de imagens #pulsar #efeito pulsante #efeito para themes #efeito themes #efeitos tumblr #efeito para tumblr #jprm

Image Rotation:

Vejam um exemplo aqui

Esse efeito parece complicado, mas, na verdade, é bem simples. Primeiro, vamos ao CSS. O código abaixo deverá ser colocado entre as tags <style> e </style>:

#circle {position:fixed !important; width:160px; background:white; height:160px; padding:5px; text-align:center; line-height:8px; z-index:999; border-radius:9999999px; border:1px solid #fcfafa; transition: all 0.7s ease-out; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;} #circle:hover{opacity:1; -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);} #circlepic{opacity:.85; border-radius:9999999px; width:160px; transition: all 0.7s ease-out; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;} #circlepic img{width:160px; height:160px;border-radius:9999999px;} #circle:hover #circlepic {opacity:0.1;} #cinside {opacity:0; z-index:1; position:fixed; width:160px; height:100px;padding-top:60px;line-height:10px;} #cinside ctitulo {font: 18px Pacifico; color: #A42423; text-align:center; display: block; padding: 5px; text-shadow: 0px 1px 1px #eae7e7; text-transform: Lowercase; background: #fff;} #cinside cdesc {font: 10px Tahoma; color: #A42423; text-align:center; padding: 5px; text-shadow: 0px 1px 1px #f0f0f0; text-transform: Lowercase; display: block;} #circle:hover #cinside {opacity:1;-moz-transform: rotate(180deg);-o-transform: rotate(180deg);-webkit-transform: rotate(180deg);}

Tudo que está em negrito deverá ser mudado.

Os width e height: você deverá mudá-los de acordo com o width e height da sua foto;

O padding-top: você também deve mudar de acordo com o tamanho da sua foto. Para que fique no meio, divida o height da sua foto por 2.

A fonte: A fonte Pacifico não está junto com o código, ou seja, você terá que mudar a fonte.

Agora, o código do <body>, que deve ser colocado onde você quiser o efeito:

<div id="circle"> <center><div id="cinside"> <ctitulo>Titulo</ctitulo> <cdesc>descrição aqui e blá blá blá... isso é só um exemplo, rsrs.</cdesc> </div> <div id="circlepic"><img src="http://static.tumblr.com/o286adx/eINmeve6a/exemplo1.png"></div> </div>

Daí é só mudar o link da imagem pelo seu, e está pronto. Espero que tenham entendido e qualquer dúvida, é só perguntar na ask.

Tutorial por Giovanna;

Se lhe for útil, dê like e credite ao making-themes.

#porgi #efeito #efeito imagem #image rotation