Imagens no campo - formulario

Front-end

11/07/2015

Vi um site, mas não lembro qual, em que tinha um formulario de pagamento, e no campo para adicionar os numeros na trazeira do cartão de credito quando colocava o cursor aparecia uma imagem mostrando isso, é javascript?
Fabricio Alves

Fabricio Alves

Curtidas 2

Melhor post

Fabricio Alves

Fabricio Alves

14/07/2015

Fabinhokls, funfou 100%, só tenho a agradecer!!!

[img]http://arquivo.devmedia.com.br/forum/imagem/379120-20150714-140652.jpg[/img]
GOSTEI 1

Mais Respostas

Fábio F.

Fábio F.

11/07/2015

Não necessariamente, isto pode ser feito em css. Mas nós temos a tendência a fazer em JavaScript por que ele é mais dinâmico. Só que fica mais leve!
Antes de eu te enviar o código. Por favor, me confirme!
Você quer uma mini janela quando a pessoa arrasta o mouse sobre o campo determinado?
Se for isso eu te mando o código css, mas se for outro caso, eu terei que pensar se pode se feito em css ou só em JavaScript!
GOSTEI 1
Fabricio Alves

Fabricio Alves

11/07/2015

Isso mesmo Fabinhkls, apenas colocando mouse, me mostre uma pequena imagem ao lado desse campo.
GOSTEI 0
Fabricio Alves

Fabricio Alves

11/07/2015

Ei, não esquece.
GOSTEI 0
Fábio F.

Fábio F.

11/07/2015

Olha se você for fazer isso e a imagem for ficar ao lado do campo o código html deverá seguir esta codificação:
<form action="" method="post" class="formulario">
	<div class="efeito">
		<input type="text" class="campo" name="nome_completo" value="" placeholder="Digite Seu Nome" />
		<div class="imagem"></div>
	</div>
</form>


O código css será responsável pelo efeito e é melhor que mantenha a div ao invés de utilizar o elemento/tag <img>.
O efeito de transição é causado pelo css no comando trasition e o comando que insere a imagem, ou neste caso, o seletor é o hover. Não é o comando css, mas o seletor das tags.
Veja como ficaria no css...
.efeito .campo {width: 200px; height: 16px; padding: 7px 10px; border: solid 1px #898989; border-radius: 4px; font-family: verdana; font-size: 12px;}
.efeito .imagem {display: inline-block; opacity: 0; transition: opacity 2s; -webkit-transition: opacity 2s;}
.efeito:hover .imagem {position: absolute; width: 100px; height: 70px; background-image: url("imagem.jpg"); background-size: 100% 100%; opacity: 1; margin: 0px 5px;}


Meu código todo ficou assim:
<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<title>Teste</title>
		<meta charset="utf-8">
		<style type="text/css">
			.efeito .campo {width: 200px; height: 16px; padding: 7px 10px; border: solid 1px #898989; border-radius: 4px; font-family: verdana; font-size: 12px;}
			.efeito .imagem {display: inline-block; opacity: 0; transition: opacity 2s; -webkit-transition: opacity 2s;}
			.efeito:hover .imagem {position: absolute; width: 100px; height: 70px; background-image: url("imagem.jpg"); background-size: 100% 100%; opacity: 1; margin: 0px 5px;}
		</style>
	</head>
	<body>
		<form action="" method="post" class="formulario">
			<div class="efeito">
				<input type="text" class="campo" name="nome_completo" value="" placeholder="Digite Seu Nome" />
				<div class="imagem"></div>
			</div>
		</form>
	</body>
</html>


Se quiser que a imagem fique a baixo do campo, tire o display: inline-block e o efeito position: absolute do css...
Se quiser que fique em cima do campo tire essas propriedades e mude o div class="imagem" de lugar com o input...
Não dei importância para a aparência e sim para o efeito, então, as propriedades importantes para isso é a transição, opacity e o seletor hover no .efeito:hover .imagem
Espero que tenha ajudado, se não consegui ajudar, me mande o que está errado...
Agradeço!

www.fabinhokls.com.br
GOSTEI 0
Fabricio Alves

Fabricio Alves

11/07/2015

Vou testar Fabinhokls, dou retorno, ok?
GOSTEI 0
POSTAR