自适应平铺的叠加式图库

Question

Not sure if this is the correct place to post but I was wondering if someone could point me in the right direction. I'm trying to create a gallery-esque type of thing but not sure what to search for.

What I am trying to achieve is to create something like the following: http://avawa.radiuzz.com/home/

I want to have a picture that when I hover over (on desktop) or click on (mobile), will pop up an overlay where I can place a title and then a couple links underneath it.

I've managed to somewhat create something but I can't get it to be responsive and when viewed on mobile, the hover option doesn't work so the overlay won't pop up.

<div class="media">
  <img class="media__image" src="_img/animation.jpg" alt="Animation Image">
  <div class="media__body">
    <h2>Animation</h2>
    <div class="program-info">
      <p><a href="#"><i class="fa fa-film fa-fw fa-lg"></i> Program Page</a></p>
      <p><a href="#"><i class="fa fa-file-o fa-fw fa-lg"></i> Student Reel</a></p>
    </div>
  </div>
</div>

Here's the CSS:

.media{display:inline-block;position:relative;vertical-align:top;margin:0 5px}
.media:first-child{margin-left:0}
.media:last-child{margin-right:0}
.media__image{display:block}
.media__body{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:7rem 3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}
.media__body:hover{opacity:1}
.media__body h2{margin-top:0;font-size:4.8rem}
.media__body .program-info{margin-left:10rem}
.media__body p{margin-bottom:1rem}

If someone could help me out in trying to create something a little better like the supplied link or at least point me to what/where I should be looking to learn how to do this, that would be great.

Answer 1

It looks like you have the normal, larger size with hover state figured out pretty well so my answer will really just target the small screen/ mobile version.

First, you're going to need javascript(jQuery in this instance) to detect the screen width on load. I detected for width less than 1024 and height less than 768, but you could easily adjust those in the code.

In the HTML, I added a second class, .hover__box, to your .media__body div in order to have a selector to target while removing .media__body, which controls the hover, based on the screen size. The short of it is that I remove .media_body and add .mobile__body, then added some jQuery to control clicking.

Here's the new HTML (with a placeholder image added):

<div class="media">
<img class="media__image" src="http://loremflickr.com/320/240/dog" alt="Animation Image">
  <div class="media__body hover__box">
    <h2>Animation</h2>
    <div class="program-info">
      <p><a href="#"><i class="fa fa-film fa-fw fa-lg"></i> Program Page</a></p>
      <p><a href="#"><i class="fa fa-file-o fa-fw fa-lg"></i> Student Reel</a></p>
    </div>
  </div>
</div>

Here's what I added to the CSS:

.hover__box{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;overflow:hidden;padding:7rem 3rem;position:absolute;top:10px;right:10px;bottom:10px;}

Here's the JS:

$( document ).ready(function() { // on DOM ready

        var width = $(window).width(), height = $(window).height(); //setting width and height variables
        if ((width <= 1023) && (height <= 767)) { //checks to see if the width is mobile sizes or not
            $(".hover__box").removeClass("media__body"); // removes hover class
            $(".hover__box").addClass("mobile__body"); // add mobile jQuery target class
            $(".hover__box").hide(); // hide the hover box
            $(".media__image").addClass("mobile__ready"); // add class to image so that it can be clicked specific to mobile
        }

        // show hover box when image is clicked on mobile
        $(".media__image.mobile__ready").click(function() {
            $(".hover__box").show();
        });

        // hide hover box when it is clicked on mobile
        $(".hover__box.mobile__body").click(function() {
            $(".hover__box").hide();
        });
    });

Here's a JSFiddle that works but you'll need to resize the box where the preview is in order to see the larger size: http://jsfiddle.net/overwine/v97m2c8n/3/