Thumbnails

Thumbnails 提供一些縮圖的顯示效果。Thumbnail 相關元件都以 .thumb- 為開頭。

預設的 Thumbnails 沒有任何效果。

<div class="thumb">
    <img class="thumb-img" src="img/temp_001.jpg">
</div>

顯示效果

當要使用顯示效果時,可新增 <div class="thumb-overlay"> 以及 <div class="thumb-content">,所有顯示的內容可置入於 .thumb-content

FadeIn

FadeIn

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

$200

Add to cart

Rating

<div class="thumb fadein">
    <img class="thumb-img" src="img/demo3.jpg">
    <div class="thumb-overlay">
        <div class="thumb-content">
            <h4>FadeIn</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="price">$200</p>
            <a class="btn-outline">Add to cart</a>
        </div>
    </div>
</div>

Slides

SlideIn

.slidein .left

SlideIn

.slidein .up

SlideIn

.slidein .right

SlideIn

.slidein .down

<div class="thumb slidein left">~略~</div>
<div class="thumb slidein up">~略~</div>
<div class="thumb slidein right">~略~</div>
<div class="thumb slidein down">~略~</div>

PullIn

PullIn

.pullin .left

PullIn

.pullin .up

PullIn

.pullin .right

PullIn

.pullin .down

<div class="thumb pullin left">~略~</div>
<div class="thumb pullin up">~略~</div>
<div class="thumb pullin right">~略~</div>
<div class="thumb pullin down">~略~</div>

ZoomIn

ZoomIn

.zoomin

<div class="thumb zoomin">~略~</div>