css顯示和幻燈片div懸停包裝

我試圖找到一個圖片庫的解決方案！我有一個盒子作爲每個圖像的包裝。我現在想隱藏右側和左側的一個圖標，在用戶不可見的框內。只是一個透明層，可能每個邊的5-10％是可見的。在JSFiddle中看到的圖標隨後滑入取決於哪個圖層被徘徊。例如，右側的圖標應該刪除圖像，左側的圖標應該使其成爲帖子的標題圖像。我可以用骨幹來處理事件，但是我沒有找到css/html和jQuery部分的解決方案。css顯示和幻燈片div懸停包裝

.box { 
    float: left; 
    min-height: 282px; 
    padding-bottom: 10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 10px; 
    width: 282px; 
} 
img { 
    max-height: 282px; 
    max-width: 100%; 
    z-index: 1; 
}

感謝radzo

來源

2014-01-23 Marc Radziwill

我看不出有任何JS在你的小提琴，你試圖得到這個已經工作？ – badAdviceGuy

不，我認爲這會更容易與一些CSS。只是想知道如何去實現它的一些想法;） –

事情是這樣的，這裏有一個FIDDLE

<div class="box"> 
    <span class="fa fa-camera fa-3x"> 
    <span class="title">Image Title</span> 
    <span class="desc">Image description</span> 
    </span> 
    <span class="fa fa-times-circle fa-3x"></span> 
    <img src="http://www.sylvain-lader.fr/wp-content/uploads/2012/07/placeholder.jpg"/> 
</div> 


.box { 
    position: relative; 
    float: left; 
    height: 282px; 
    width: 282px; 
    overflow: hidden; 
} 
img { 
    max-height: 282px; 
    max-width: 100%; 
} 
.fa-camera, 
.fa-times-circle { 
    position: absolute; 
    display: block; 
    padding: 10px; 
    width: 131px; 
    height: 272px; 
    transition: all 0.4s ease-in; 
} 
.fa-camera { 
    left: -120px; 
    text-align: left; 
    font-size: 22px !important; 
} 
.fa-camera:hover { 
    background: rgba(255,255,255,0.5); 
    left: 0; 
} 
.fa-times-circle { 
    right: -120px; 
    text-align: right; 
    font-size: 26px !important; 
} 
.fa-times-circle:hover { 
    right: 0; 
    cursor: pointer; 
} 
.title, 
.desc { 
    display: block; 
} 
.title { 
    margin-top: 10px; 
    font-size: 12px; 
    font-weight: bold; 
} 
.desc { 
    margin-top: 8px; 
    font-size: 12px; 
}

來源

2014-01-24 01:18:11 mdesdev

css顯示和幻燈片div懸停包裝

回答

相關問題