.image-container {
    position: relative; /* Necesario para el posicionamiento absoluto del overlay */
    display: inline-block; /* Asegura que los contenedores no se superpongan verticalmente */
}

.image-container::before {
    content: ""; /* Crea un pseudo-elemento para el overlay */
    position: absolute; /* Coloca el overlay de forma absoluta sobre la imagen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Fondo con opacidad (aquí se usa un fondo negro con 50% de opacidad) */
    opacity: 0; /* Oculta el overlay inicialmente */
    transition: opacity 0.3s ease; /* Agrega una transición suave de opacidad */
}

.image-container:hover::before {
    opacity: 1; /* Muestra el overlay cuando se pasa el ratón por encima */
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el icono en el medio del overlay */
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.overlay i {
    color: #fff; /* Color del icono */
}

.image-container:hover .overlay {
    opacity: 1;
}