EFECTO HOVER

Question

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:

<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:,

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

Mil gracias

Answer 1

Intenta inserter estas etiquetas en el Css para el estilo a ver si te funciona

<style>

img {

  opacity: 0.5;

  filter: alpha(opacity=50); /* For IE8 and earlier */

}

img:hover {

  opacity: 1.0;

  filter: alpha(opacity=100); /* For IE8 and earlier */

}

</style>