Foros del Web » Creando para Internet » CSS »

Iluminación imagen

Estas en el tema de Iluminación imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/01/2011, 03:04
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años
Puntos: 21
Iluminación imagen

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
  #2 (permalink)  
Antiguo 20/01/2011, 03:21
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Iluminación imagen

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.
  #3 (permalink)  
Antiguo 20/01/2011, 03:27
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años
Puntos: 21
Respuesta: Iluminación imagen

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
  #4 (permalink)  
Antiguo 20/01/2011, 03:34
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Iluminación imagen

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/
  #5 (permalink)  
Antiguo 20/01/2011, 03:41
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años
Puntos: 21
Respuesta: Iluminación imagen

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
  #6 (permalink)  
Antiguo 20/01/2011, 03:42
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años
Puntos: 21
Respuesta: Iluminación imagen

Lo siento pero si me funciona lo malo es que solo en mozilla y no en internet explore :(
  #7 (permalink)  
Antiguo 20/01/2011, 04:01
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Iluminación imagen

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.
  #8 (permalink)  
Antiguo 20/01/2011, 04:05
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Iluminación imagen

pon ; al final de todas linas
  #9 (permalink)  
Antiguo 20/01/2011, 09:09
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años
Puntos: 21
Respuesta: Iluminación imagen

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
  #10 (permalink)  
Antiguo 20/01/2011, 09:14
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Iluminación imagen

realmente nose que puede faltar tampoco ya que no soy ningun experto.
  #11 (permalink)  
Antiguo 20/01/2011, 09:22
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Iluminación imagen

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]
  #12 (permalink)  
Antiguo 20/01/2011, 09:54
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años
Puntos: 21
Respuesta: Iluminación imagen

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
  #13 (permalink)  
Antiguo 20/01/2011, 10:06
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Iluminación imagen

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

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:21.