CODEWITHSUNDEEP
csshoverzoomingtransition
clemoendo
clemoendo

Reputation: 11

Difficult scrolling on mobile devices due to transition/zoom at hover

I am using a Wordpress theme (Modern Agency, a subtheme of Total). Images of portfolio items zoom, and an icon appears when you hover on them. This also applies to mobile devices, but this is making scrolling difficult: I find myself dragging my finger up and down the screen multiple times in order to scroll, because my mobile browser (iOS iPhone SE) seems to stick to the portfolio item, as opposed to scrolling.

you can find the website here:

I have tried to customize the stylesheet, but I cannot find a way to disable the zoom on images.

This is what I have tried so far:

.overlay-plus-hover, .overlay-plus-hover:hover, portfolio-entry-media-link, portfolio-entry-media-link:hover, portfolio-entry-img {
transition: none!important;
zoom: 0!important;
}

.wpex-image-hover,.wpex-image-hover:hover, .grow img:hover {
    transition: none!important;
    zoom: 0!important;
}

I want to disable the transition on mobile devices in order to allow smooth and normal scrolling.

Upvotes: 0

Views: 106

Answers (1)

ScottieG
ScottieG

Reputation: 328

Set a media query for mobile screen sizes and set the transform attribute to none on the .wpex-image-hover.grow:hover img class.

For example:

@media screen and (max-width:480px) {
    .wpex-image-hover.grow:hover img {
        -ms-transform: none;
        -webkit-transform: none;
        -o-transform: none;
        -moz-transform: none;
        transform: none;
     }
 }

Upvotes: 0

Related Questions