响应平铺覆盖画廊

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/