Always show div on mobile version-CodePudding

I would like to show the "info" div (the black box with the white text, that gets visible on mouse hover on the image), but ONLY on mobile and WITHOUT the hover effect.

Tried the following way:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) 
{
    .image-hover-page-container.animatedParent.info{
        display:block !important;
    }
}

my site: link source code: link

CodePudding user response：

For show on mobile, add these elements to active CSS file:

@media (max-width: 767px) {
    }
    .ih-item.square.effect3.bottom_to_top .img {
        transform: translateY(-50px) !important;
    }
    
    .ih-item.square.effect3.bottom_to_top .info {
        transform: translateY(0) !important;
        visibility: visible; 
        opacity: 1;
    }
}