Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Efecto hover - HTML

HTML - Efecto hover - HTML

Volver
Nuevo Tema
<<>>
 
Vista:

Efecto hover - HTML

Publicado por Marta (1 intervención) el 02/11/2019 09:11:50
Hola, soy nueva en el mundo de la programación y me surgen muchas dudas que a priori, me parecen sencillas, cuestión de pequeños detalles que no soy capaz de resolver...
¿Podríais ayudarme?

Estoy haciendo una galería dónde cada imagen tiene un enlace a una url de la misma web, hasta aquí bien, pero no consigo aplicar el efecto hover (opacidad) a las imágenes. Este es el código de una imagen:

1
<div class="wp-block-image"><figure class="alignleft is-resized"><a href="http://x.es/work/gallery/x/"><img src="http://x.es/wp-content/uploads/2019/11/x.png" alt="" class="wp-image-754" width="350" height="292"/></a></figure></div>


Y este efecto es el que quiero aplicar pero no se dónde debe ir y no estoy segura si es correcto:,

1
.imagen:hover {filter: opacity(.5);}

Mil gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Efecto hover - HTML

Publicado por ScriptShow (409 intervenciones) el 02/11/2019 13:35:12
Saludos,

un ejemplo posible basado en la Class y 100% compatible:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.wp-image-754:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
-ms-opacity: 0.5;
-o-opacity: 0.5;
opacity: 0.5;
}
</style>
 
<div class="wp-block-image"><figure class="alignleft is-resized"><a href="http://x.es/work/gallery/x/"><img src="http://x.es/wp-content/uploads/2019/11/x.png" alt="" class="wp-image-754" width="350" height="292"/></a></figure></div>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar