Iluminación imagen

sirdaiz · #1 (**permalink**) 20/01/2011, 03:04

Hola me gustaria hacer lo sgte:

<style type=”text/css”>

.ejemplo {width: 100%; background-color: red}

.opaco {filter: alpha(opacity=50); opacity: .5}

</style>

<p class="ejemplo">Ejemplo sin opacity.</p>

<p class="ejemplo opaco">Ejemplo con opacity a 50%.</p>

<p><img src="imagen.gif" width="100" height="109"><img src="imagen.gif" class="opaco"
width="100" height="109"></p>

pero quiero hacer que cuando pase el raton por encima la imagen se vuelva mas luminosa,alguna idea??

Gracias

chuntin · #2 (**permalink**) 20/01/2011, 03:21

esto he encontrado por ahi:

Opacidad en Firefox, Opera, Chrome...

En estos navegadores se define la transparencia de una manera más simple. Lo haremos a través del atributo opacity, de esta manera:

. claseopacidad {opacity: .5}

Con esto conseguiremos que la clase sea 50% transparente, o 50% opaca, como prefiramos decir.

sirdaiz · #3 (**permalink**) 20/01/2011, 03:27

El codigo que puse arriba salen 2 imagenes,1 que la imagen sale normal y la otra la imagen sale opaca pero yo quiero que al pasar el raton por la imagen normal se ponga opaca,como aplico el css desde el metodo onmouseover

Gracias

chuntin · #4 (**permalink**) 20/01/2011, 03:34

ejemplo{
backgroun-color:white
}

ejemplo:hover {
opacity:.5
}

yo probaria con algo asi pero nose si funcionara porque no lo he probado.

PD--> les tienes que poner las misma clase a los dos poruqe lo que haces es que se ponga la opacidad de la imagen al 50% y se vea el fondo blanco de debajo.

un saludo.

mira a ver si me puedes ayudar en mi post http://www.forosdelweb.com/f53/ayuda...lmente-877967/

sirdaiz · #5 (**permalink**) 20/01/2011, 03:41

Hola chuntin he probado con esto:

<html>

<head>

<title>Ejemplo1</title>

<style type="text/css">

.opaco{
backgroun-color:white
}

.opaco:hover {
filter: alpha(opacity=50);
opacity: .5
}

</style>

</head>

<body>

<img src="fondo.jpg" class="opaco" width="150" height="150">
</body>

</html>

pero no funciona

Te ayudaría con tu post pero en esto del diseño y css no soy bueno, alo mejor si fuera lago de java si,sorry

Gracias por tu respuesta

sirdaiz · #6 (**permalink**) 20/01/2011, 03:42

Lo siento pero si me funciona lo malo es que solo en mozilla y no en internet explore :(

chuntin · #7 (**permalink**) 20/01/2011, 04:01

he encontrado esto:

opacity: .25;
-moz-opacity: .25;
filter:alpha(opacity=25);

pone que se pongan los tres y cada navegador cogerá el que entienda.

chuntin · #8 (**permalink**) 20/01/2011, 04:05

pon ; al final de todas linas

sirdaiz · #9 (**permalink**) 20/01/2011, 09:09

Bueno probe el codigo este:

<html>
<head>
<title>Ejemplo1</title>
<style type="text/css">
.opaco:hover {
opacity: .25;
-moz-opacity: .25;
filter:alpha(opacity=25);
}
</style>
</head>
<body>
<img src="fondo.jpg" class="opaco" width="150" height="150">
</body>
</html>

pero en ie no funciona,solo sigue funcionando en crome y firefox, pero bueno algo es algo,muchas gracias por tu ayuda

chuntin · #10 (**permalink**) 20/01/2011, 09:14

realmente nose que puede faltar tampoco ya que no soy ningun experto.

sanxuan · #11 (**permalink**) 20/01/2011, 09:22

En esta página puedes encontrar algunos ejemplos de transparencias. Seguro que podrás adaptar alguno. A mí me funciona en todos los navegadores.
[URL="http://www.cocemfeweb.zobyhost.com/CSS030.html"]http://www.cocemfeweb.zobyhost.com/CSS030.html[/URL]

sirdaiz · #12 (**permalink**) 20/01/2011, 09:54

wow tio perfecto, muchas gracias a los 2, por fin pude adaptar lo que queria, este es el resultado final

<html>
<head>
<title>Ejemplo1</title>

</head>
<body>
<img src="fondo.jpg" style="opacity:0.4;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alp ha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.al pha.opacity=70" />

</body>
</html>

Gracias por la ayuda, os puedo dar mi voto a los 2 de alguna forma??

Saludos

chuntin · #13 (**permalink**) 20/01/2011, 10:06

a mi me da igual porque nose ni para que son los votos. jejej