Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

CrazyLOL

Fazer esse efeito...

Por , em Desenvolvimento frontend

Recommended Posts

Gerciley    14

Gerciley
Postado

Com CSS, usando a pseudoclasse :hover, e o atributo visibilit...

 

Monte todo modelo em um div encima da foto e deixe oculto, no :hover da div ative a visibilidade.

 

Muito simples..

Abraços, espero ter ajudado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CrazyLOL    2

CrazyLOL
Postado

Ola Gerciley, obrigado pela dica porém sou leigo em html e css sei so o basico mexo mais no php você teria um exemplo de codigo desse que você falou para eu tentar mexer com base nele?

 

obrigado novamente pela ajuda... :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vanilson    2

Vanilson
Postado

CrazyLOL, o efeito é simples, como Gerciley disse basta fazer uso do hover, e entender como funciona o position. Fiz um exemplo basico.

<!doctype html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Efeito com hover</title>
	<style>
		.contentor{
			width: 225px;
			height: auto;
			margin: 0 auto;
		}
		ul {
			margin: 0;
			padding: 0;
		}
		ul li{
			list-style: none;
			position: relative;
		}
		ul li section{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 98%;
			background-color: rgba(0, 0, 0, .5);
			display: none;
		}
		ul li h5{
			color: #FFFFFF;
		}
		ul li:hover > section{
			display: block;
		}
	</style>
</head>
<body>
	<div class="contentor">
		<ul>
			<li>
				<img src="imagem.jpg" alt="Lorem ipsum">
				<section class="opcoes">
					<h5>Montes sit integer parturient risus platea, duis in, massa, sociis enim ac purus sociis turpis dignissim arcu auctor, vel urna, tincidunt turpis et mid, a natoque eu quis, lorem tortor, dictumst purus? Sed lundium</h5>
				</section>
			</li>
		</ul>
	</div>
</body>
</html>

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

CrazyLOL    2

CrazyLOL
Postado

Muito obrigadoo Vanilson...

tira uma dúvida aqui, to tentando fazer aquelas caixinhas igual do site que mostrei no inicio, e fiz dessa maneira...

Aumentei esse css no seu codigo

 

 

.test {
display: block;
width: 148px;
height: 83px;
margin-left: 4px;
background: #d9151c;
float: left;
margin-top: 48px;
}
e coloquei assim...
<li>
<img src="235x250.png" alt="Lorem ipsum">
<section class="opcoes">
<div class="test"><strong>Teste</strong> testes novo: </div>
</section>
</li>

 

porém não surge o box apenas aparece os textos...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito