Tạo lightbox với CSS3

06/05/2020

Tạo lightbox với CSS3

Như các bạn đã biết lightbox là plugin của jQuery giúp zoom ảnh từ dạng thumbnail, thường các bạn hay dùng jquery tuy nhiên chỉ với CSS3 bạn cũng có thế làm được một lightbox có tác dụng tương tự bằng CSS3 :target

Trước khi vào phần hướng dẫn tôi muốn nói sơ qua về cách zoom ảnh của lightbox này. Nó zoom ảnh bằng cách phóng to ảnh dạng thumbnail bằng css3-transform:scale. Ở bài này tôi zoom ảnh lên 4 lần do đó bên trong scale sẽ nhận tham số là 4. Vì vậy ta chọn size ảnh sao cho nó lớn hơn ít nhất 4 lần size của thumbnail để khi zoom thì ảnh không bị vỡ.

<a href="#" class="thumbnail">
<img scr="img/picture.jpg" alt="image"/>
</a>

Mã HTML

<ul id="box">
<li id="pic-1">
<a href="#pic-1" class="pic"><img src="img/1.jpg" alt="pic-1"/></a>
<a href="#box" class="close"></a>
</li>
</ul>

Ở đây ta đặt thẻ ul có id là box và thẻ li chứa ảnh id là pic-1 thì lần lượt bên trong nó có 2 thẻ a có giá trị href là #box và #pic-1. Với thẻ a có href bằng #box ta để nó class close, thẻ này sau này có tác dụng thu nhỏ ảnh về dạng thumbnail sau khi đã zoom.

Mã CSS

#box li{

position:relative;

display:inline-block;

width:100px;

height:100px;

margin:5px;

border:2px solid #fbfbfb;

box-shadow:0 0 2px rgba(0,0,0,0.2);

}

.pic{

display:block;

width:100px;

height:100px;

}

.pic img{

max-width:100%;

max-height:100%;

}

.close{

position:absolute;

width:10px;

height:10px;

display:block;

right:-7px;

top:-7px;

background:url(../img/close.png);

background-size:100%;

visibility:hidden;

}

Do size ảnh ban đầu là 400×400 mà kích thước của thẻ a 100×100 nên ta set giá trị max-width:100% cho thẻ img. Cùng với đó ta cũng ẩn nút close đi với giá trị visibility:hidden.

Tạo lightbox với CSS3

Thêm thuộc tính transition cho thẻ li.

#box li{

/*---code trước---*/

-moz-transition:all 0.6s ease;

-ms-transition:all 0.6s ease;

-webkit-transition:all 0.6s ease;

-o-transition:all 0.6s ease;

}

Sử dụng CSS3-target để phóng to ảnh với hiệu ứng xoay vòng.

#box li:target{

-moz-transform:scale(4) rotate(360deg);