Colorear u oscurecer 'opacidad'

kiM- · #1 (**permalink**) 01/03/2011, 16:32

Bueno, resulta que yo tengo tres imágenes respectivamente (hover1.png, hover2.png, hover3.png), las tengo puestas de manera que tengan opacidad de forma predeterminada y que al pasar el ratón la opacidad desaparezca, mostrando así la imagen original. Quisiera saber si hay alguna manera de colorear esa opacidad (transparente-blanquecida) a un tono oscuro o en vez de usar opacidades se coloque un color oscuro con poca opacidad encima.

Os dejo el código:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website 2.0</title>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
background-image: url(bgweb.png);
background-repeat: no-repeat;
background-attachment: fixed;
}

#contenedor {
width: 960px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #999;
border-left-color: #999;
background-color: #FFF;
}
#headerbg {
width: 960px;
background-image: url(header.png);
overflow: hidden;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #25568E;
}
#logo {
width: 450px;
float: left;
}
#form_pass {
width: 510px;
float: right;
background-image: url(bgform.png);
height: 170px;
background-repeat: no-repeat;
background-position: center;
}
#form1 {
padding-left: 40px;
padding-top: 70px;
}
input#areatxt {
background-color: #E9E9E9;
border: 0px;
opacity: 0.7;
}
input#button1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-image: url(bgmenu2.png);
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border: 0px;
font-weight: bold;
color: #FFF;
opacity: 0.7;
}
input#veryf {
opacity: 0.7;
}
#menu_contenedor {
width: 900px;
float: left;
margin-left: 5px;
}
.menu_blue {
float: left;
}
.menu_blue a {
background-image: url(bgmenu.png);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
text-decoration: none;
text-shadow: 0.1em 0.1em #333;
float: left;
margin-left: 5px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
.menu_blue a:hover {
background-image: url(bgmenu2.png);
}
#contenido_noticias {
width: 960px;
}
#noticias_blue {
width: 940px;
margin-right: auto;
margin-left: auto;
border: 1px dashed #25568E;
background-color: #E1E1E1;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #000;
margin-top: 10px;
}
.menu_blue_head {
width: 937px;
margin-right: auto;
margin-left: auto;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
font-weight: bold;
color: #000;
padding-left: 3px;
}
.menu_blue_content {
width: 930px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#footer_blue {
width: 960px;
}
#contenedor_buttons {
width: 960px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #25568E;
}
a.linkop img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
border: 0px;
}
a.linkop:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
border: 0px;
}
</style>
</head>

<body>
<div id="contenedor">
<div id="headerbg">
<div id="logo"><img src="fxlogo.png" width="400" height="158" /></div>
<div id="form_pass">
<form id="form1" name="form1" method="post" action="">
<label for="areatxt"></label>
<input type="text" name="areatxt" id="areatxt" />
<label for="areatxt2"></label>
<input type="password" name="areatxt2" id="areatxt" />
<input type="submit" name="button1" id="button1" value="Iniciar Sesión" />
<input type="checkbox" name="veryf" id="veryf" />
<label for="veryf"></label>
</form>
</div>
<div id="menu_contenedor">
<div class="menu_blue"><a href="#">Noticias</a></div>
<div class="menu_blue"><a href="#">Descargas</a></div>
<div class="menu_blue"><a href="#">Comunidad</a></div>
<div class="menu_blue"><a href="#">Chat</a></div>
<div class="menu_blue"><a href="#">Quiénes Somos</a></div>
</div>
</div>
<div id="contenedor_buttons"><a class="linkop" href="#"><img src="hover1.png" width="320" height="140" /></a><a class="linkop" href="#"><img src="hover2.png" width="320" height="140" /></a><a class="linkop" href="#"><img src="hover3.png" width="320" height="140" /></a></div>
<div id="contenido_noticias">
<div id="noticias_blue">
<div class="menu_blue_head">Noticia de prueba número #1, by Khrysten</div>
<div class="menu_blue_content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</div>
</div>
<div id="noticias_blue">
<div class="menu_blue_head">Noticia de prueba número #1, by Khrysten</div>
<div class="menu_blue_content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</div>
</div>
</div>
<div id="footer_blue"><img src="footer.png" width="960" height="209" /></div>
</div>
</body>
</html>

No sé si me he explicado bien, basicamente busco que la opacidad sea oscura y no... transparente, o poner un color oscuro encima de las imágenes.

Gracias de antemano!

sanxuan · #2 (**permalink**) 01/03/2011, 16:54

Una posibilidad es colocar las imágenes como fondo de la etiqueta <a> y colocar dentro de los enlaces una imagen con el color y la transparencia que desees.
Al pasar el ratón por encima usamos la opacidad de manera inversa a como lo has hecho tú, volviendo completamente transparente la imagen oscura para que sólo se vea la imagen de fondo.
La imagen que crea la sombra oscura puede ser la misma para todos los enlaces y si el tono es uniforme basta con que tenga un sólo píxel, aunque debes indicar en la etiqueta de imagen el ancho y alto de la imagen de fondo.

kiM- · #3 (**permalink**) 01/03/2011, 17:48

No he entendido mucho, poner un bg a la etiqueta a? como se haría eso?

A ver si lo entendi.. Tengo una imagen de 300x300, hago un div de 300x300 y la pongo de fondo y luego.. me perdí :\ la verdad es que hay cosas que escapan a mi comprensión, podrías aclararme un poco más lo que has escrito?

Gracias por responder

sanxuan · #4 (**permalink**) 01/03/2011, 17:58

No necesitas ningún div. El css de los enlaces:
a.hover1 {background: url(hover1.png);}
a.hover2 {background: url(hover2.png);}
a.hover3 {background: url(hover3.png);}

Y una clase añadida a cada uno de ellos, los pongo por claridad en diferentes lineas:
<a class="linkop hover1" href="#"><img src="sombra.png" width="320" height="140" /></a>
<a class="linkop hover2" href="#"><img src="sombra.png" width="320" height="140" /></a>
<a class="linkop hover3" href="#"><img src="sombra.png" width="320" height="140" /></a>

sombra.png es la imagen oscura con transparencia. Puedes hacerla desaparecer cuando pases por encima mediante opacidad:
a.linkop:hover img {
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
-khtml-opacity: 10;
border: 0px;
}
o bien mediante la propiedad visibility:
a.linkop:hover img {
visibility:hidden;
border: 0px;
}

kiM- · #5 (**permalink**) 01/03/2011, 18:38

Debo estar haciendo algo mal porque aunque lo haaga me sale mal (se ve un cachito de la imagen nada más... Te dejo el css y el html:

CSS:

Cita:

a.linkop img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
border: 0px;
}
a.linkop:hover img {
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
-khtml-opacity: 10;
border: 0px;
}
a.hover1 {
background: url(../images/hover1.png);
}
a.hover2 {
background: url(../images/hover2.png);
}
a.hover3 {
background: url(../images/hover3.png);
}

HTML:

Cita:

Lo intento pero nada, no sale, y se me estropea el tamaño porque los links de las imágenes aparecen previas a pasar el ratón por encima aparecen con el borde azul ese de los links :\

sanxuan · #6 (**permalink**) 02/03/2011, 13:08

Lo del borde ya lo habías resuelto tú mismo con la propiedad border:0 none.
Compara el código HTML que has incluido en tu mensaje con el que te dí. Hay diferencias en las imágenes.
Para que el fondo del enlace se muestre completamente puedes probar alguna de estas soluciones:
1. añadir display:block-inline dentro de la declaración de a.linkop.
2. usar display:block y float:left dentro de la declaración de a.linkop.

No deberían aparecer problemas, pero si fuese necesario puedes definir el ancho y alto de las imágenes también en a.linkop.

Hay bastantes ejemplos de menús en la red que te pueden servir. Muchos sin salir de este foro.