Removing Hover Effect on Mobile and Showing Title

Question

I've been searching all night to find the answer to this. I'm working on a site and trying to modify the behavior of the hover effect. I'm not sure which .js file(s) are creating the effect and how I should go about modifying them.

Basically, I have a grid layout on the homepage and when you hover over an image, it displays the title and a dark overlay. There's a bit of an animation on the title as well.

I need to add a media query to block this on mobile, and to make the title of the blocks appear on page load. You can see what I mean by visiting the site.

The site is here: theshoemaven(dot)com

I understand that you can use

var mq = window.matchMedia('@media all and (max-width: 700px)');

to create media queries within javascript. But I'm not sure where to apply it, and how to ensure that the title over each box appears on pageload.

I would GREATLY appreciate any help on this. Thanks!

** UPDATE **

I've found the following function which calls the portfolio grid. If I can make it display the title on load (not just hover) I will be in great shape. Unfortunately, PHP is not my favorite language. :)

 /*---------------------------------------*/
            /*  Output Starts
            /*---------------------------------------*/


            // Start container
            echo '<div class="'.$container.' cap-wrap">';

                // If hover
                if($hover==true) {

                    echo '<div class="hover-wrap">';


                        // If lightbox
                        if($link=='lightbox') {


                            echo '<a rel="gallery-'.$postid.'" href="'.$full[0].'" title="'.$image_cap.'" class="swipebox">';

                            echo vk_hover('lightbox');

                            echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';

                            echo '</a>';


                        // If post
                        } else {

                            echo '<a href="'.$post_link.'" title="'.$post_title.'">';

                            echo vk_hover('link');

                            echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';

                            echo '</a>';

                        }


                    echo '</div>';


                // If no hover
                } else {

                    echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';

                }

                // The Caption
                if($caption==true && $image_cap!='') {

                    echo '<div class="caption no-link no-dec"><p>'.$image_cap.'</p></div>';

                }

            // End container
            echo '</div>';


        } // end foreach

    } // end if attachments

} // end function

Answer 1

The matchMedia API has its uses: it's great for using addListener to let you know when your media queries switch. In my opinion it probably shouldn't be used here though.

I notice that the body of the page has the following classes: "noTablet", "noMobile", so when I emulated an iphone, sure enough "noMobile" became "mobile."

I was going to suggest implementing a 100% css fix using the body.noMobile selector, but it appears that you are using a ton of javascript to make the effect happen in the first place, which is setting inline styles, so...

Looking at your javascript I am finding the following compressed code:

s(".hover > div").css("opacity", "0"), s(".hover").hover(function() {
        s(this).children("div").addClass("fadeUpIcon").animate({opacity: "1"}, 100)
    }, function() {
        s(this).children("div").css("opacity", "0").removeClass("fadeUpIcon")

if you were to switch all of the selectors to prepend body.noMobile like: $('body.noMobile .hover > div') You will likely eliminate the "overlay" for all mobile devices.

Then you could use simple (albeit your selectors will likely have to be more specific) CSS like:

body.mobile .hover {

}

To style it for mobile.

This will probably work out for you, but I am of the strong opinion that you should try to budget time to remove the javascript controlling this and simply use the :hover pseudo selector along with transforms and transitions to achieve the same effect. If you really want to use media queries instead of whichever mobile detection you currently use, then those could easily go into the CSS as well.