Aquí tienes algunos ejemplos de código HTML y CSS para crear efectos al pasar el ratón sobre las fotos. Puedes elegir el que mejor se adapte a tus necesidades:
Método 1: Cambiar la opacidad de la imagen al pasar el ratón
Este método reduce la opacidad de la imagen cuando el ratón pasa por encima, creando un efecto sutil.

.hover-effect:hover { opacity: 0.8; /* Puedes ajustar este valor entre 0 y 1 */}Método 2: Escalar la imagen al pasar el ratón
Este método agranda ligeramente la imagen cuando el ratón pasa por encima.

.scale-effect { transition: transform 0.3s ease-in-out; /* Añade una transición suave */}.scale-effect:hover { transform: scale(1.1); /* Aumenta el tamaño en un 10% */}Método 3: Rotar la imagen al pasar el ratón
Este método rota la imagen un poco cuando el ratón pasa por encima.

.rotate-effect { transition: transform 0.3s ease-in-out; /* Añade una transición suave */}.rotate-effect:hover { transform: rotate(15deg); /* Rota la imagen 15 grados */}Método 4: Cambiar la imagen al pasar el ratón
Este método cambia una imagen por otra cuando el ratón pasa por encima.
.imageBox { position: relative; float: left;}.imageBox .hoverImg { position: absolute; left: 0; top: 0; display: none; /* Oculta la imagen al pasar el ratón por defecto */}.imageBox:hover .hoverImg { display: block; /* Muestra la imagen al pasar el ratón */}Recuerda que puedes combinar estos efectos o crear los tuyos propios utilizando CSS. Para implementar estos códigos, necesitarás un archivo HTML y un archivo CSS enlazado a tu HTML.
¿Te gustaría probar alguno de estos ejemplos o prefieres explorar otras opciones de efectos?