[SOLUCIONADO] Problema con un menu fixed, y img con opacity.

josema12441 · #1 (**permalink**) 30/12/2014, 06:39

Hola amigos que tal..? mi problema es que , tengo mi barra de menu en la parte de arriba de mi web, en fixed.. para que siempre se vea.. todo bien, pero al agregarle a una imagen en :hover un opacity, al poner el puntero sobre la foto para q el opacity actue, la imagen se pone encima de la barra del menu.. Como puedo resolver esto? Aquí les dejo una imágenes pa q me entiendan.

aqui es como se ve bien
http://www.subirimagenes.net/i/141230014359901551.png

y aqui el error
http://www.subirimagenes.net/i/141230014401476082.png

Sarlit · #2 (**permalink**) 30/12/2014, 06:43

Sin ver el código es un poco divagar, pero lo mismo puedes solucionarlo con un z-index para asegurarte de que siempre queden las fotos debajo de tu menú.

PD: Muy elegante tu web, me ha molado.

josema12441 · #3 (**permalink**) 30/12/2014, 06:53

Cita:

Iniciado por Sarlit

Sin ver el código es un poco divagar, pero lo mismo puedes solucionarlo con un z-index para asegurarte de que siempre queden las fotos debajo de tu menú.

PD: Muy elegante tu web, me ha molado.

Gracias amigo por tu buen comentario! Sin embargo no logro conseguir que funcione, Te dejo el código y a ver si tu sabes por que?? Gracias de antemano!!

html

Cita:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fernando A</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/fotos.css">
<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>

</head>
<body>

<header>
<div id="subheader">
<div id="nombre">
<a href="·">
<h1>Fernando A.</h1>
</a>
<h2>Fotografo</h2>
</div>

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="fotos.html">Galeria</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>

</div>
</header>

<section>

<div id="Container">
<div id="titulo">
<h2>Galeria</h2>
</div>

<div id="galeria">
<a href="imagenes/sol"></a>
<a href="imagenes/detalle/1.jpg"><img src="imagenes/detalle/1.jpg" alt="1"></a>
<a href="imagenes/detalle/2.jpg"><img src="imagenes/detalle/2.jpg" alt="2"></a>
<a href="imagenes/detalle/3.jpg"><img src="imagenes/detalle/3.jpg" alt="3"></a>
<a href="imagenes/detalle/4.jpg"><img src="imagenes/detalle/4.jpg" alt="4"></a>
<a href="imagenes/detalle/5.jpg"><img src="imagenes/detalle/5.jpg" alt="5"></a>
<a href="imagenes/luces/6.jpg"><img src="imagenes/luces/6.jpg" alt="6"></a>
<a href="imagenes/luces/7.jpg"><img src="imagenes/luces/7.jpg" alt="7"></a>
<a href="imagenes/luces/8.jpg"><img src="imagenes/luces/8.jpg" alt="8"></a>
<a href="imagenes/luces/9.jpg"><img src="imagenes/luces/9.jpg" alt="9"></a>
<a href="imagenes/siluetas/10.jpg"><img src="imagenes/siluetas/10.jpg" alt="10"></a>
<a href="imagenes/siluetas/11.jpg"><img src="imagenes/siluetas/11.jpg" alt="11"></a>
<a href="imagenes/siluetas/12.jpg"><img src="imagenes/siluetas/12.jpg" alt="12"></a>
<a href="imagenes/siluetas/13.jpg"><img src="imagenes/siluetas/13.jpg" alt="13"></a>
<a href="imagenes/siluetas/14.jpg"><img src="imagenes/siluetas/14.jpg" alt="14"></a>
<a href="imagenes/siluetas/15.jpg"><img src="imagenes/siluetas/15.jpg" alt="15"></a>
<a href="imagenes/sol/16.jpg"><img src="imagenes/sol/16.jpg" alt="16"></a>
<a href="imagenes/sol/17.jpg"><img src="imagenes/sol/17.jpg" alt="17"></a>
<a href="imagenes/sol/18.jpg"><img src="imagenes/sol/18.jpg" alt="18"></a>
<a href="imagenes/sol/20.jpg"><img src="imagenes/sol/20.jpg" alt="20"></a>
<a href="imagenes/sol/21.jpg"><img src="imagenes/sol/21.jpg" alt="21"></a>

</div>
</div>

</section>

<footer>
<div id="copy">
<p>Todos los derechos reservados // JoseG-2015</p>
</div>

<div id="iconos">
<ul>
<li><a href=""><img src="imagenes/facebook.png" alt="facebook"></a></li>
<li><a href=""><img src="imagenes/twitter.png" alt="twitter"></a></li>
<li><a href=""><img src="imagenes/youtube.png" alt="youtube"></a></li>
</ul>
</div>
</footer>

</body>
</html>

Cita:

/*Header*/

header {
width: 100%;
position: fixed;
display: block;
top:0px;
background: #fff;
-webkit-box-shadow: 7px 11px 25px -13px rgba(0,0,0,0.89);
-moz-box-shadow: 7px 11px 25px -13px rgba(0,0,0,0.89);
box-shadow: 7px 11px 25px -13px rgba(0,0,0,0.89);
}

header #subheader {
width: 960px;
margin: auto;
padding: 10px 0px 70px 0px;
}

#nombre {
width: 210px;
padding: 15px 0px;
float: left;
box-sizing:border-box;
}

#nombre h1 {
font-size: 30px;
font-family: 'Cinzel', serif;
}

#nombre h2 {
font-family: 'Quicksand', sans-serif;
float: right;

}

a {
text-decoration: none;
color: #000;
}

nav {
width: 660px;
float: right;
padding: 15px 0px;
box-sizing:border-box;
}

nav ul {
text-align: right;
margin-top: 20px;

}

nav ul li {
display: inline;
margin-left: 15px;
font-family: 'Quicksand', sans-serif;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;

}

nav ul li a:hover{
text-decoration: underline;
text-shadow: 2px 2px 8px rgba(150, 150, 150, 0.56);
}

/*Footer*/

footer {

width: 960px;

margin: auto;
margin-top: 70px;
padding-bottom: 120px;

}

#copy {
width: 480px;
float: left;
margin-top: 20px;
}

#copy p {
font-size: 13px;
font-family: 'Quicksand', sans-serif;

}

#iconos {
width: 480px;
float: left;
}

footer #iconos ul {
width: 100%;
text-align: right;
}

footer #iconos ul li {
display: inline;
margin-left: 10px
}

footer #iconos ul li img {
width: 50px;

}

/*Galeria*/

section{
width: 960px;
margin: auto;
}

#titulo {
width: 100%;
float: left;
margin-bottom: 50px;

}

#titulo h2 {
text-align: center;
font-family: 'Quicksand', sans-serif;
font-size: 50px;

}

#galeria {
margin-top: 150px;
}

img {

width: 460px;
padding: 4px;
margin: 4px;

transition: all 0.5s;
transition-delay: 0s;

}

img:hover{
opacity: 0.6;

}

josema12441 · #4 (**permalink**) 30/12/2014, 06:55

Amigo ya lo resolvi!!! Gracias!

pzin · #5 (**permalink**) 31/12/2014, 03:18

Es de buena costumbre si solucionas un problema dejar por aquí la solución por si le vale a otra persona.

Supongo que lo habrás resuelto indicando un z-index.