純 CSS 製作的 Lightbox
前言
此文章為 CSS :target 選擇器的筆記，透過 :target 選擇器可以巧妙的設計純 CSS 的燈箱效果，不必再透過 JavaScript 來偵測點擊事件，那麼我們就開始吧~
效果展示
:target 選擇器介紹
HTML 可以透過設定錨點來快速跳到頁面裡的某區塊，而 :target 這個偽類所針對的就是目前錨點所定位的元素。
例如：
https://cdpn.io/timchen0607/debug/vYXNPNW/dXMqBaEBmgQr#Rn1Zji:target 所作用的元素就是 id 為 Rn1Zji 的元素。
所以只要利用 :target 選擇器來控制目標錨點的顯示與隱藏就可以不透過 JavaScript 來巧妙的設計一個燈箱工具。
實作
這邊解釋下上面的範例：
div.list 區塊裡面使用 a 標籤包著 img 並將 href 屬性設定為對應的 id ，如此一來點擊圖片即可跳到對應的錨點位置。
接著為了實現燈箱效果，先針對 .lightbox 的區塊進行設定並將之隱藏。
並針對.lightbox:target 選擇器設定顯示，如此一來當我們點擊div.list 區塊的圖片時會觸發錨點，而 CSS 就會對於指定的元素加上 CSS 效果，如此一來就達成點擊某張圖片會顯示大圖的效果了。
接著說明.lightbox 區塊 href 屬性設定為空錨點作用，透過設定為空錨點，只要我們點擊顯現出來的大圖，此時的錨點就會改設定為空，而原本的圖片也因為失去 CSS :target 的渲染變回預設的隱藏圖片，如此一來就達成關閉圖片的效果了。
後記
希望這樣的分享能讓你了解，這次的範例比較單純，未來你可以嘗試將它加上關閉按鈕或是切換上下頁的功能，思路都是一樣的，只要透過錨點與 CSS 設定，你也可以自己實做燈箱效果，那麼這次的分享就到這邊，我們下次再見~
謝謝各位看到這邊，也請各位看倌多多指教與交流。
Do one thing at a time, and do well.
