jquery - 响应式平铺叠加图库

Question

不确定这是否是正确的发帖地点，但我想知道是否有人可以指出正确的方向。我正在尝试创建类似画廊的东西，但不确定要搜索什么。

我想要实现的是创建如下内容:http://avawa.radiuzz.com/home/

我想要一张图片，当我将鼠标悬停在(桌面上)或点击(移动设备)时，会弹出一个叠加层，我可以在其中放置标题，然后在其下方放置几个链接。

我已经设法创建了一些东西，但我无法让它响应，并且在移动设备上查看时，悬停选项不起作用，因此不会弹出叠加层。

<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>

这是 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}

如果有人可以帮助我尝试创建更好的东西，比如提供的链接，或者至少指出我应该寻找什么/在哪里学习如何做到这一点，那就太好了。

Answer 1

看起来您已经很好地理解了带有悬停状态的正常、较大尺寸，所以我的答案实际上只针对小屏幕/移动版本。

首先，您将需要 javascript(在本例中为 jQuery)来检测加载时的屏幕宽度。我检测到宽度小于 1024 且高度小于 768，但您可以轻松地在代码中调整它们。

在 HTML 中，我向 .media__body div 添加了第二个类 .hover__box，以便在删除 .media__body 时有一个目标选择器，它根据屏幕尺寸控制悬停。简而言之，我删除了 .media_body 并添加了 .mobile__body，然后添加了一些 jQuery 来控制点击。

这是新的 HTML(添加了占位符图像):

<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>

这是我添加到 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;}

这是 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();
        });
    });

这是一个有效的 JSFiddle，但您需要调整预览所在框的大小才能看到更大的尺寸:http://jsfiddle.net/overwine/v97m2c8n/3/