Cara css4 selector :target picture gallery

dengan adanya :target dan :matches pada css membuat pendesain web semakin mudah dalam produksinya
lihat contoh berikut untuk :target

<style> .kotak:target { width:100%; height:100%; opacity:1; color:white; left:0%; } img {width:400px;height:350px} .kotak { -webkit-transition:all 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; transition: 1s; background-color:blue; color:blue; } #holder { border: 1px solid #ff6666; width: 200px; height: 100px; background-color: yellow; position:relative; } </style>




Dan Untuk htmlnya sebagai berikut


<a href="#satu">satu</a> <a href="#dua">dua</a> <a href="#tiga">tiga</a> <div id="holder"> <div id="satu" class="kotak"> gambar1</div> <div id="dua" class="kotak"> gambar2</div> <div id="tiga" class="kotak"> gambar3</div> ddd </div>



satu dua tiga

judul section1

disini tempat artikel yang pertama

judul section2

disini tempat artikel yang kedua

judul section3

disini tempat artikel yang ketiga

Posted in: