Discover Top Posts Tagged with #descricao hover

Imagem Hover (com descrição, frase e links)

Bem, tava aqui sem fazer nada e resolvi fazer uma imagem hover, como sempre vejo a foto cm descrição hover, resolvi fazer com a descrição uma frase e links.

Preview

Cole esse código no seu css:

(x)

Cole esse código depois de <body>

(x)

Por Kauana | inspirar-r

Não reblog, nem repasse

Se usar dê like e credite

#descricao hover #frase hover #links hover #kakau

Descrição hover #02

Visualize

Cole esse code no seu css (antes de </style>)

/***—-Sidebar e Descrição hover por REORGANIZE-I (DESIGN--HTML) NÃO RETIRE OS CRÉDITOS SE NÃO VAI TER PORRADA ————***/

.sidnehmoni {position:fixed;width:240px; height:240px;margin-left:118px; margin-top: 120px;;overflow:hidden;} .sidnehmoni img {width:240px; height:240px;}

#descricmoni {position:fixed;margin-top: -200px; margin-left:13px; width: 200px; height: 150px;;font-size: 10px; font-family:verdana; padding: 6px; text-align:center;color: #000000/*cor da letra*/; background:#ffffff/*cor do fundo*/; opacity:0;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}

.sidnehmoni:hover #descricmoni {opacity:0.6;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;} /*REORGANIZE-I*/

Cole este code depois de <body … >

<div id="descricmoni"> Vc escreve o tanto que quiser, e não esquece de creditar </div> </div>

Se utilizar dê like.

Não reblogue.

Não retire os meus créditos / Credite.

Reponha as aspas

{Môni}

#moni #descricao hover

Descrição hover #01

Visualize

Cole esse code no seu css (antes de </style>)

/*Descrição hover por Reorganize-i ( DESIGN--HTML) NÃO RETIRE A PORRA DOS CRÉDITOS SE NÃO VAI TER PORRADA*/

#sidm {left: 230px; top: 80px; position:fixed; width:190px; height:200px; } #sidm img {width: 190px; height: 190px; background:#ffffff ;padding:4px;z-index: 11; border: 9px double #000/*COR DA BORDA*/;opacity:1;} /**REORGANIZE-I*/

#descrimoni {width: 180px;position:fixed; left: 245px; top: 120px; height:68px;color :#000000/*COR DA LETRA*/;font-size: 9px;font-family: 'tahoma':center;padding: 3px;text-transform:uppercase;background:#fff/*COR DO FUNDO*/;-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.9s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;opacity:0.0}/**REORGANIZE-I*/

#sidm:hover #descrimoni{opacity:0.8;margin-top:70px;-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;}/*NÃO MEXE AQUI*//**REORGANIZE-I*/

Cole este code depois de <body … >

Descrição hover, ai vc escreve assim, bonitin, NÃO ESQUECE DE CREDITAR

</center>

</div></div>

Se utilizar dê like.

Não reblogue.

Não retire os meus créditos / Credite.

Reponha as aspas

{Môni}

#descricao hover #hover #moni

Side com descrição hover

Visualize aqui -xx-

Cole este código entre <style> e </style>

/*Design por Season-html [indesculpável]*/ .sidebar {width:320px;height:280px;/*season-html*/position:fixed;margin-left:100px;margin-top:170px;position:fixed;} .sidebar {width:240px;} .sidebarimage img { margin-left:40px;width:200px;/*season-html*/height:200px;margin-top:10px;border:1px; border-width:1px; /*season-html*/border-style:solid; border-color:#ddd;Padding:16px;}

.sidebar:hover #descri {opacity:0.9;margin-top:-140px;/*season-html*/-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}

#descri {margin-left: 55px;margin-top: -120px;width: 200px;/*season-html*/line-height: 200%;text-transform:none;text-align:center;font-family:calibri;font-size:10px;font-style:none;padding:5px;letter-spacing:0px;background:#fff;opacity:0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;/*season-html*/transition:all 0.5s ease-in-out;}

Após isso, cole esse depois de <body> ou <body onkeydown=”return false”>

<div id="descri">SUA DESCRIÇÃO AQUI </div>

Estou utilizando essa side no meu theme número 15 então já aproveitei e postei essa mesmo.

Lembre-se de sempre creditar ao Season-html.

Não reblogue e nem repasse.

Se utilizar ou gostar dê like.

/Carolline

#hover description #descriptionhover #sidehover #descricao hover #sidebar #sidebarcomefeito #season-html #carolline

Descrição hover #1

Preview online

Vamos ao css:

/*/ ESTILO DE DESCRIÇÃO POR DEPRESIVAR.TUMBLR.COM, DON'T COPY /*/ #posi {text-align:center; position:fixed; ;margin-left:140px; text-align: left;margin-top:15px;} #posi:hover #picture {-webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; opacity:0.0;-webkit-transform: scale(-1.111) rotate(-360deg) ;} #picture { position:absolute; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out;} #picture img { width: 219px; height: 221px; } .descricao { font-family: calibri; font-size: 11px; text-align: center;; margin-top:0px;background-color:#fff;width: 209px; height: 211px; ;color:#888;padding: 5px ;}

Em #posi fica o posicionamento de TUDO. em #picture fica a personalização da foto da sidebar e .descrição a descrição né, rs

Agora cole ESSE código onde você quer que ela fique.

Favor se usar, de like e credite.

/isa

#isa #tutos #tutoriais #descricao #descricao hover

Descrição hover

Preview Online

Ela é uma descrição bem simples que quase todos usam, pra dar certinho, vou passar o código da descrição junta com a sidebar:

Cole no seu css:

/*/ IMAGEM DA DESCRICAO /*/ .side img {width:190px; height:222px;position:fixed;margin-left:160px; margin-top:100px; opacity:1;border: 2px solid #000; ;display:block;-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;} /*/ descricao /*/ #descricao {text-align: center; font-size: 14px; position: fixed; margin-left:160px;width:190px; background-color:transparent none; padding: 6px; margin-top: 18px; background-attachment: fixed; opacity: 1; line-height: 15px;overflow: auto;;height:2220px; color:#7a6e5f;font-family: calibri;font-size:10px;padding: 2px;-webkit-transition-duration: .80s;opacity:0.0;} #descricao:hover{-webkit-transition-duration: .80s;margin-top:325px;opacity:1.0;} /*/ AQUI VC POSICIONA TODA ELA /*/ #position{margin-top:5px;margin-left:135px;}

A pocição como ali eu disse é arrumada em #position, o margin-top, e o margin-left que tem na descrição e na side é apenas pra dar um espaço entre si, não

Agora cole ISSO onde você quer ela.

Dúvidas pergunte.

Feito completamente por mim, depresivar, então faça o favor de creditar.

/Isa

#isa #descricao #hover #descricao hover #tutos #tuto #tutoriais #tutorial

Description Surprise

Se as div's não aparecerem na Dash entre no tumblr para vê-las.

Bom galera, eu tava fuçando em uns sites e vi esse efeito de imagem muitcho louco, :B k. Dei o nome de Description Surprise porque é praticamente uma descrição surpresa no hover, ah visualizem se quiser, cliquem aqui.

Vamos lá, coloque este código no seu CSS e edite só se quiser tá?

/* -- Description Surprise by Luís (obrigar.tumblr.com) --------------- */ .dsurprise {position: relative; z-index: 1; width:240px; height:250px;} .dsurprise img {width:250px; height:250px; border:1px solid #fff; position:relative; z-index: 2; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .dsurprise:hover img {-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -moz-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05);} .dsurprise div.desc {position: absolute; width: 90%; z-index: 1; bottom:0; left: 5px; padding: 8px; background: rgba(0, 0, 0, 0.8); color: white; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; opacity: 0; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -moz-transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; transition: all 0.5s ease 0.5s;} .dsurprise div.desc a {color:white;} .dsurprise:hover div.desc {-moz-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); opacity:1;}

Agora aonde quer que apareça a descrição, na sua sidebar ou sl coloque este código abaixo:

<div class="dsurprise"> <img src="URL DA SUA IMAGEM"/> <div class="desc"> <br> Escreva sua descrição aqui... </div> </div>

Não tire esse <br> daí da div da descrição, eu coloquei pra dar um espaçamento se não a descrição vai ficar muito grudada e não vai ficar legal. Bom, é isso. Se usar dê liked e credite tá legal? Beijos y.y'

#descriptionsurprise #imagens #tutoriais #descricao hover #gustavo