[英]Responsive tiled overlay gallery
不知道這是張貼的正確地點,但我想知道是否有人可以指出我正確的方向。 我正在嘗試創建類似畫廊的類型的東西,但不確定要搜索什么。
我試圖實現的目標是創建如下所示的內容: 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}
如果有人可以幫助我嘗試創建一些更好的東西(如提供的鏈接),或者至少將我指向我應該尋找的方法/位置,以學習如何做,那將很棒。
看來您具有正常的較大尺寸,並且具有很好的懸浮狀態,所以我的回答實際上只會針對小屏幕/移動版本。
首先,您將需要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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.