Tạo Lightbox từ CSS3

Hôm nay mình sẽ chia sẻ cho các bạn một hiệu ứng lightbox cực kỳ ấn tượng và rất đẹp mắt chỉ bằng CSS. Ý tưởng ở đây là tạo một ảnh thumbnail và ảnh lớn cùng một lúc (ảnh này sẽ bị ẩn đi). Và khi chúng ta click vào ảnh thumbnail thì ảnh lớn sẽ được xuất hiện cùng với hiệu ứng cực cool nhờ vào các thuộc tính transitions và animations có trong CSS3.

Xem Demo | Download

HTML

Để tạo hiệu ứng lightbox, trước hết chúng ta cần đoạn html chuẩn như sau :

<ul class="lb-album">
    <li>
        <a href="#image-1">
            <img src="images/thumbs/1.jpg" alt="image01">
            <span>Pointe</span>
        </a>
        <div class="lb-overlay" id="image-1">
            <img src="images/full/1.jpg" alt="image01" />
            <div>
                <h3>pointe <span>/point/</h3>
                <p>Dance performed on the tips of the toes</p>
                <a href="#image-10" class="lb-prev">Prev</a>
                <a href="#image-2" class="lb-next">Next</a>
            </div>
            <a href="#page" class="lb-close">x Close</a>
        </div>
    </li>
    <li>
         
    </li>
</ul>

Trong đoạn html bên trên, chúng ta có ảnh thumbnail và ảnh lớn được liên kết thông qua ID, chúng ta cũng có các nút bấm Next và Prev dùng để di chuyển đến những ảnh khác , đồng thời một nút để tắt lightbox với class lb-close.

CSS

Đầu tiên , chúng ta cần định dạng layout cơ bản cho các ảnh thumnails :

.lb-album{
    awidth: 900px;
    margin: 0 auto;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
    float: left;
    margin: 5px;
    position: relative;
}
.lb-album li > a,
.lb-album li > a img{
    display: block;
}
.lb-album li > a{
    awidth: 150px;
    height: 150px;
    position: relative;
    padding: 10px;
    background: #f1d2c2;
    box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
    border-radius: 4px;
}

Tiêu đề (title) của mỗi thumbnail sẽ được làm ẩn và chúng ta sẽ chèn hiệu ứng opacity khi chúng ta rê chuột vào ảnh thumbnail.

.lb-album li > a span{
    position: absolute;
    awidth: 150px;
    height: 150px;
    top: 10px;
    left: 10px;
    text-align: center;
    line-height: 150px;
    color: rgba(27,54,81,0.8);
    text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
    font-size: 24px;
    opacity: 0;
    background:
        radial-gradient(
            center,
            ellipse cover,
            rgba(255,255,255,0.56) 0%,
            rgba(241,210,194,1) 100%
        );
    transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
    opacity: 1;
}

Kế tiếp chúng ta sẽ tiếp tục định dạng cho hiệu ứng overlay :

.lb-overlay{
    awidth: 0px;
    height: 0px;
    position: fixed;
    overflow: hidden;
    left: 0px;
    top: 0px;
    padding: 0px;
    z-index: 99;
    text-align: center;
    background:
        radial-gradient(
            center,
            ellipse cover,
            rgba(255,255,255,0.56) 0%,
            rgba(241,210,194,1) 100%
        );
}

Một khi chúng ta click vào ảnh thumbnail , một hình nền mờ sẽ được bao phủ toàn màn hình (overlay). Nhưng trước hết , chúng ta sẽ định dạng cho phần tiêu đề và mô tả.

.lb-overlay > div{
    position: relative;
    color: rgba(27,54,81,0.8);
    awidth: 550px;
    height: 80px;
    margin: 40px auto 0px auto;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
    padding: 0px 20px;
    awidth: 200px;
    height: 60px;
}
.lb-overlay div h3{
    font-size: 36px;
    float: left;
    text-align: right;
    border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
    font-size: 16px;
    font-family: Constantia, Palatino, serif;
    font-style: italic;
}
.lb-overlay div h3 span{
    display: block;
    line-height: 6px;
}
.lb-overlay div p{
    font-size: 14px;
    text-align: left;
    float: left;
    awidth: 260px;
}

Và chúng ta sẽ định vị trí cho nút tắt (lb-close)

.lb-overlay a.lb-close{
    background: rgba(27,54,81,0.8);
    z-index: 1001;
    color: #fff;
    position: absolute;
    top: 43px;
    left: 50%;
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    awidth: 50px;
    height: 23px;
    overflow: hidden;
    margin-left: -25px;
    opacity: 0;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

Vả ảnh được phóng to :

.lb-overlay img{
    max-height: 100%;
    position: relative;
    opacity: 0;
    box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
    transition: opacity 0.5s linear;
}

Các nút bấm di chuyển :

.lb-prev, .lb-next{
    text-indent: -9000px;
    position: absolute;
    top: -32px;
    awidth: 24px;
    height: 25px;
    left: 50%;
    opacity: 0.8;
}
.lb-prev:hover, .lb-next:hover{
    opacity: 1;
}
.lb-prev{
    margin-left: -30px;
    background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
    margin-left: 6px;
    background: transparent url(../images/arrows.png) no-repeat top right;
}

Để khi chúng ta click vào ảnh thumbnail và ảnh lớn tương ứng sẽ xuất hiện với hiệu ứng fade in thì chúng ta cần thêm đoạn css sau :

.lb-overlay:target {
    awidth: auto;
    height: auto;
    bottom: 0px;
    right: 0px;
    padding: 80px 100px 120px 100px;
}
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
    opacity: 1;
}

Trong bài viết này mình chỉ có thể giới thiệu cho các bạn hiệu ứng fade in khi ảnh thumbnail được click , để có thể xem đầy đủ các hiệu ứng thì các bạn có thể download mã nguồn về máy để có thể xem đầy đủ hơn.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster