Discover Top Posts Tagged with #imghover

Awesome Image hover with Text overlay

#image hover effects #imghover #latest css animations #animation #image hover with text #coding #learn to code #codingdays #codingisfun #css #css3 #html5

Text overlay animation with img hover (with code)

#imghover #image hover effects #css tutorial #css tutorial for beginners #animation #css animation examples #css animation tutorial #html tutorial #divinector

Image hover effect with text overlay (with code)

#imghover #image hover effects #animation #css animation tutorial #css3 #css tutorial for beginners #tutorial #divinector

Imagem hover

Bom é aquele efeito que você passa o mouse,e muda de imagem *o*,magico não?u.u

De qualquer forma preview aqui [xxx]

Vamos ao tutorial?Me gusta =3

Primeiramente cole seguinte código antes de </style>

/*** Imagem hover Bruna Teixeira/Sincere—smile***/ .imghoverss {display: block; position: relative; width: 200px; height: 285px; border:5px solid #8fc3ce;margin-left:480px;margin-top:130px;} .imghoverss span { position: absolute; top:0px; bottom:0px; opacity: 0;-webkit-transition: all 0.70s linear;-webkit-transition: all 0.70s linear;-moz-transition: all 0.70s linear;transition: all 0.70s linear;} .imghoverss:hover span{opacity:1;}

/**fim do css da imagem hover**/

Se você não sabe muito de CSS,mude apenas o que está em negrito ok?Vou dar uma explicada rápida:

width: 200px; height: 285px; = Você precisa colocar EXATAMENTE os valores correspondentes ao tamanho da imagem que você quer.

border:5px solid #8fc3ce;=Isso é aquela bordinha do preview.Se quiser mudar a cor troque isso:#8fc3ce pelo código da cor que vc deseja,porém se vc não quiser aquela bordinha troque esse mesmo código por isso: transparent

margin-left:480px;margin-top:130px; = Você muda os valores pra posicionar a imagem onde quiser no seu theme.

Se ainda assim não entendeu consulte esse post.

Bom vamos ao html.Cóle o código seguinte logo após <body>

Modifique o que se pede,está em NEGRITO.

ATENÇÃO:na altura das imagens deve ter 2px a mais do que a altura da imagem no CSS.Por exemplo:

Se no primeiro código que eu dei (o que você vai colocar antes de </style>) você colocar a altura correspondente a 285 px,no código que eu dei acima (que você vai colocar após <body>)você deve colocar nas DUAS imagens a altura correspondente 287px ou seja 2 pixels a mais.Entendeu??

Desculpa a confusão pra explicar,rs.Se não entendeu algo pergunte aqui.

Se usar/gostar DÊ LIKE E CREDITE.

Tutorial e códigos INTEIRAMENTE FEITOS POR MIM.

Não faça plágio,senão eu te denunciarei pro tumblr.Isso é crime.

/Bruna

#imghover #CREDITE #Bruna #like tb

Imagem Hover

Olá pessoal. Hoje vou ensinar a vocês como se faz esse efeito: clica. Legal né? Então, para usá-lo siga os passos abaixo:

1- Cole esse código no seu css. Antes de </style>

2- Cole esse código onde quer que o efeito apareça. Substitua as urls das imagens e coloque a largura e a altura do tamanho certo de cada imagem. Se for colocar mais, faça o mesmo, sempre substituindo as imagens e colocando o tamanho ideal delas.

Espero que entendam e que goste. Qualquer dúvida vá na ask. Tutorial feito por Matheus. Se lhe for útil de like e credite ao DFY pelo tutorial :*

#imghover

Imagem hover

Esse tuto é bem fácil. É quando você passa o mouse em cima de uma imagem ela muda. Copie e cole o código abaixo antes de </style> .photoeh {background: url('URLDAIMAGEM'); width:200px ; height: 300px; -webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; display:inline-block; border: 3px solid #fff;} .photoeh:hover {background: url('URLDAIMAGEM'); width:200px ; height: 300px; -webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; display:inline-block; border: 3px solid #000;} Onde quer que você quer colocar a foto hover você coloca o seguinte código: <div class="photoeh"></div>

IMPORTANTE! Onde tem URLDAIMAGEMcoloque a url da imagem 1 e da imagem 2 do seu hover. Onde está 200do width é a largura das suas fotos. Onde está 300do height é a altura das suas fotos. Mude os números conforme o tamanho das suas fotos. Onde está #fff e #000 são os códigos das cores das bordas das imagens, mude-as como quiser. Se for útil dê like. /Fran

#imghover #fran

Imagem Hover:

A imagem Hover é a mais facil que eu acho.

coloque isso onde quer que a imagem apareça:

Bom é isso já sabe oque mudar.

-Juli

#imghover

como faço uma sidebar hover, ou seja quando passa o mouse na foto da sidebar e aparece a descrição e tall.s

Coloca isso no teu CSS:

.imghf { position: fixed; color: transparent;

height: 170px; font-style: italic; margin-top: 0px; text-align: center; letter-spacing: 1px; line-height:31px; font-style: bold;

margin-bottom: 5px; opacity: 0.8; font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; font-size: 20px;height:100px; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; width:330px; height:170px;}

.imghf:hover { text-align: center; color: #737373; font-family: 'verdana' ;font-size: 9px; text-align: center; background-color: #fff; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s;width:330px; height:170px; }

Agora coloca isso onde vc quer que apareça:

id="imghf">

class="imghf"> SUA DESCRIÇÃO AQUI

SE USAR CREDITE POR FAVOR !

ANA

#imghover