[Resolvido] Efeito hover

[Giovani 104]

Pessoal, preciso fazer o seguinte efeito:

 

Um menu "normal" com esse efeito hover, como se fosse uma película em cima da imagem.

Alguém tem alguma dica?

[William Bruno 1501]

hum... css sprite simples..

 

eu pessoalmente, acho desnecessário fazer a película.. mas se fizer, um png com opacidade resolve.

ai posiciona ela absolutamente, e tal..

[Giovani 104]

William, a película é necessária, e na verdade fiz isso que você sugeriu (png transparente) mas o diabo dos IEs não rodam isso <_<

 

Sobre o Sprite não rola, pois a imagem do Job (no exemplo a branca) vem do BD e o hover tem outra imagem, entende?

 

FF, Chrome, Safari tudo normal.

[Aprendiz CSS 3]

Tem scripts que forçam o IE a interpretar o png

[Giovani 104]

Aprendiz, você tá falando da transparência?

Esse não é o problema <_<

 

O problema é que a imagem, hover no caso, nem aparece nos IEs.

[Kineri 0]

Coloque a imagem no fundo dos <a> e estique-os com css (width e height) e esconda o texto (text-indent ou similar).

 

Quando ocorrer o a:hover troque a imagem de fundo do link

[Aprendiz CSS 3]

teria como colocar um link para ver o problema acontecendo?

[Giovani 104]

Também já tentei com text-indent e continua não funcionando nos IEs <_<

 

Essa foi a última de muitas versões que eu já fiz:

#miniaturas ul li{
	color: #bbb;
	float: left;
	font: bold 12px Arial, Helvetica, sans-serif;
	height: 185px;
	margin: 0 20px 20px;
	position: relative;
	width: 190px;
	text-align: center;
}
#miniaturas ul li span{
	color: #777;
	display: block;
	font: normal 11px Arial, Helvetica, sans-serif;
}
#miniaturas ul li img{
	background-color: #202027;
	border: 1px solid #363640;
	padding: 4px;
	margin-bottom: 3px;
}
#miniaturas ul li a{
	display: block;
	height: 125px;
	left: 5px;
	padding: 5px;
	position: absolute;
	width: 170px;
	top: 5px;
}
#miniaturas ul li a:hover{
	background: url(imagens/miniaturas+hover.png) no-repeat center;
	display: block;
	height: 125px;
	position: absolute;
	width: 170px;
	left: 5px; top: 5px;
}

[Aprendiz CSS 3]

link?!

[Giovani 104]

Aprendiz, não tem link.

[Aprendiz CSS 3]

putz Gio!

 

Ai complica, então posta o html e as imagens também vai!

 

Você me ajudou muito no passado, quero retribuir :)

 

Abraço

[Giovani 104]

Cara, pior que só tenho isso mesmo, o css e essa parte do HTML:

<ul>
		
			<li>
				
				<a href="http://"></a>
				<img src="imagens/job1.jpg" />
				Cliente<span>Interface para website</span>
			
			</li>
<li>
				
				<a href="http://"></a>
				<img src="imagens/job1.jpg" />
				Cliente<span>Interface para website</span>
			
			</li>
</ul>

Vamos fazer o seguinte, é upar essa parte....daqui a pouco volto :)

 

---------------------------

 

Feito!

http://www.giooliveira.com.br/teste/

 

Bem melhor :)

[Kineri 0]

Opa, não tinha visto o link com sua solução.

 

Na verdade entendi o problema errado, me desculpe

 

Um exemplo: Crie seu menu assim:

<ul id="nav">
  <li id="link1"><a href="#">Link 1</a></li>
  <li id="link2"><a href="#">Link 2</a></li>
</ul>

Então defina estilos assim:

#nav a{
  text-indent: -9999px; /* esconde o texto */
  display: block;
  width: 100px; /* largura da sua imagem */
  height: 30px; /* altura da sua imagem */
}

#link1 a{
  background: transparent url('caminho/da/imagem/normal/1.jpg') 50% 50%; /* coloca a imagem normal, sem o hover */
}

#link1 a:hover{
  background: transparent url('caminho/da/imagem/hover/1.jpg') 50% 50%; /* coloca a imagem com o hover */
}

#link2 a{
  background: transparent url('caminho/da/imagem/normal/2.jpg') 50% 50%; /* coloca a imagem normal, sem o hover */
}

#link2 a:hover{
  background: transparent url('caminho/da/imagem/hover/2.jpg') 50% 50%; /* coloca a imagem com o hover */
}

Tente fazer numa página à parte e depois de funcionar coloque no seu código completo

[Giovani 104]

Kineri, eu não posso colocar a imagem do serviço (miniatura) no css, pois ela vai ser colocada via CMS.

Sem contar que não serão só duas, serão várias.

 

;)

[Evandro Oliveira 331]

Nossa! Esse podia ir perfeitamente pra série de Desafio de Menus CSS! hahahahahaha...

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http-~~-//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" media="all" href="/lib/css/reset.css">
	<link rel="stylesheet" type="text/css" media="all" href="css/398948.css">
</head>

<body>
    <ul>
        <li>
        	<a href="#">
        		<span></span>
				<img src="img/398948a.jpg" alt="miniatura">
				<b>Cliente</b>
				Interface para web.
			</a>
		</li>
		<li>
        	<a href="#">
        		<span></span>
				<img src="img/398948a.jpg" alt="miniatura">
				<b>Cliente</b>
				Interface para web.
			</a>
		</li>
    </ul>		
	<!--[if IE 6]>
		<script type="text/javascript" src="/lib/js/DD_belatedPNG_0.0.8a-min.js"></script>
		<script type="text/javascript">DD_belatedPNG.fix('span');</script> 
	<![endif]-->
</body>
</html>

 

 

 

body {
	background: #222;
	font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 20px;
}

a {
	color: #fff;
	position: relative;
	text-decoration: none;
}

a, b {
	display: inline-block;
	width: 100%;
}

img {
	border: 1px solid #444;
	padding: 2px;
}

li {
	float: left;
	margin-left: 20px;
	text-align: center;
	width: 185px;
}

span {
	background: url('../img/398948b.png');
	display: block;
	height: 135px;
	margin: 3px;
	position: absolute;
	width: 0;
}

a * {
	cursor: pointer;
}

a:hover {
	text-indent: 0;
}

a:hover span {
	width: 180px;
}

 

[Giovani 104]

Pow Evandro, não vou ter tempo de testar hoje....funcinou esse código aí?

Não acreditoooooo.....já tinha dado um tempo pra relaxar a mente sobre isso :)

[angelorubin 142]

Estou testando aqui e não funcionou no IE não.

 

Daqui a pouco posto algo, tô na luta aqui ! hehe

 

Varios testes e nada.

 

Também notei que não roda no Opera, pelo menos na versão que tenho aqui - 10.53.

 

Como o evandro disse poderia lançar esse desafio para o pessoal.

 

Vou continuar tentando por aqui.

[Evandro Oliveira 331]

http://www.4shared.com/video/bpvDH8Hd/tutorial.html

[Aprendiz CSS 3]

Eu assisti o video e funcionou no IE6 e no IE7 e 8 rola na boa?

[Evandro Oliveira 331]

ie 6, 7, 8, chrome, safari, opera e firefox