Ir para conteúdo

POWERED BY:

Arquivado

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

presencajoao23

Como Faz Hover Com Duas Imagens e Descrição ?

Por , em Desenvolvimento frontend

Recommended Posts

presencajoao23    0

presencajoao23
Postado

Olá Pessoal Estou Querendo Saber Se Esse Efeito HOVER da Para Eu Criar Com CODIGO "CSS" ???

 

O Efeito Que Eu Falo é o da Pagina LOJAS do Shopping Curitiba.

http://shoppingcuritiba.com.br/lojas/

 

 

O Efeito é o Seguinte Pessoal Quando Passar o Mouse a Logamarca Que Esta de Um Certo Tamanho Diminui Para Metade Mais o Menos e Aparece Alguns Texto de Descrição das Lojas e Outra Coisa Gostaria de Saber Se Eu Posso Incrementar Com o PHP Ele ???

 

Com Certeza Ele Deve Ter PHP Junto !!!

 

 

Pessoal Se Alguem Tem Como Me Dizer Mais o Menos Com Se Faz Essa Função CSS Agradeço...

Vlw Pessoal Tudo de Bom Para Todos !!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Montei mais ou menos o que você pediu. Agora é uma questão de estilizar

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<title>teste</title>

	<style>
		.painel {
			background: #ccc;
			border: 1px solid #555;
			border-radius: 10px;
			display: inline-block;
			height: 150px;
			padding: 5px;
			position: relative;
			width: 150px;
		}

		.painel span {
			color: #fff;
			display: none;
			position: absolute;
		}

		.painel .title {
			background: #FCC;
			top: 50px;
		}

		.painel .description {
			background: #F99;
			top: 100px;
		}

		.painel:hover {
			height: 160px;
			padding: 0;
			width: 160px;
		}

		.painel:hover img {
			height: 160px;
			width: 160px;
		}

		.painel:hover span {
			display: block;
		}
	</style>
</head>

<body>
	<a class="painel">
		<img src="http://lorempixum.com/output/city-q-c-160-160-9.jpg" width="150" height="150" alt="">
		<span class="title">titulo</span>
		<span class="description">Descrição</span>
	</a>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Dá pra fazer só com css, vide a resposta do Evandro. Mas se quiser pode colocar um efeito com js :)

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