ARDY MENTWOZT: Cara membuat galeri photo menggunakan animasi CSS3 accordion

Pernahkah anda menggunakan plugin akordion dalam proyek anda? saya percaya bahwa anda semua pernah, dan sebagian besar anda bekerja membangun proyek menggunakan javascript (atau jQuery). Kita Biasanya menggunakan plugin tersebut (akordion) untuk membuat promo dengan gambar, dengan sedikit galeri foto, atau dalam hal lain kita harus membuat sebuah iklan dengan daftar berbagai fitur produk. Kita bisa menggunakan kehebatan dan kelebihan dari CSS3.

View Demo

KODE HTML

<div class="accordion css3accordion">
            <span id="slide1"></span>
            <span id="slide2"></span>
            <span id="slide3"></span>
            <span id="slide4"></span>
            <span id="slide5"></span>
            <ol>
                <li class="slide1">
                    <a href="#slide1"><h2><span>Toy story</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3.jpg" />
                    </div>
                </li>
                <li class="slide2">
                    <a href="#slide2"><h2><span>Pixar</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/pixars-up.jpg" alt="Slide Two" />
                    </div>
                </li>
                <li class="slide3">
                    <a href="#slide3"><h2><span>Toy story 3</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3-1.jpg" alt="Slide Three" />
                    </div>
                </li>
                <li class="slide4">
                    <a href="#slide4"><h2><span>Yogi Bear Movie</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/Yogi-Bear-Movie.jpg" alt="Slide Four" />
                    </div>
                </li>
                <li class="slide5">
                    <a href="#slide5"><h2><span>The hobbit</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/the-hobbit-2012.jpg" alt="Slide Five" />
                    </div>
                </li>
            </ol>
        </div>

LANGKAH LANGKAHNYA :

Masuk ke akun blogger anda -> Klik Drop down menu

Kemudian klik Tata Letak -> Tambahkan gadget/HTML Javascript

Pastekan kode diatas didalamnya

Simpan gadget..

Silahkan ganti URL/link gambar pada warna pink diatas dengan URL/Link gambar anda. Ganti judul slidenya sesuai dengan keinginan anda

KODE CSS

* { margin: 0; padding: 0; } body { background-color: #aaa; } h1, h2 { margin:10px 0; text-align: center; } header { background-color:rgba(33, 33, 33, 0.9); color:#ffffff; display:block; font: 14px/1.3 Arial,sans-serif; height:50px; position:relative; } header h2{ font-size: 22px; margin: 0px auto; padding: 10px 0; width: 80%; text-align: center; } header a, a:visited { text-decoration:none; color:#fcfcfc; } .accordion { margin:20px auto; overflow:hidden; position:relative; width:960px; } @charset 'utf-8'; .liteAccordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; -webkit-tap-highlight-color: transparent } .liteAccordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none } .liteAccordion .slide > h2 { color: black; font-size: 16px; font-weight: normal; margin: 0; z-index: 100; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; /* fixes chrome bug */ -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; } .liteAccordion .slide > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .liteAccordion .slide > h2 b { display: inline-block; position: absolute; top: 13%; left: 10%; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .liteAccordion .slide > h2:hover { cursor: pointer } .liteAccordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white } .liteAccordion noscript p { padding: 10px; margin: 0; background: white } /****************************************** Basic */ .liteAccordion.basic .slide > h2 { background: #333; color: white; line-height: 225% } /****************************************** Dark */ .liteAccordion.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); } .liteAccordion.dark .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% } .liteAccordion.dark .slide > h2 span { background: #353535; color: white } .liteAccordion.dark .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b } .liteAccordion.dark .slide > h2.selected span, .liteAccordion.dark .slide > h2.selected span:hover { background: #353535; background: -moz-linear-gradient(left, #353535 0%, #555555 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555)); background: -webkit-linear-gradient(left, #353535 0%,#555555 100%); background: -o-linear-gradient(left, #353535 0%,#555555 100%); background: -ms-linear-gradient(left, #353535 0%,#555555 100%); background: linear-gradient(left, #353535 0%,#555555 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 ); } .liteAccordion.dark .slide > h2.selected b { background: #383838; background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636)); background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%); background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%); background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%); background: linear-gradient(top, #3a3a3a 0%,#363636 100%); } .liteAccordion.dark .slide > div { background: #030303; margin-left: 5px } /***************************************** Light */ .liteAccordion.light { border: 9px solid white; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #a0a0a0; -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); } .liteAccordion.light .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% } .liteAccordion.light .slide > h2 span { background: #fcfcfc; background: -moz-linear-gradient(left, #fcfcfc 0%, #ededed 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed)); background: -webkit-linear-gradient(left, #fcfcfc 0%,#ededed 100%); background: -o-linear-gradient(left, #fcfcfc 0%,#ededed 100%); background: -ms-linear-gradient(left, #fcfcfc 0%,#ededed 100%); background: linear-gradient(left, #fcfcfc 0%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 ); -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset; -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset; -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset; box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset; color: #909090; } .liteAccordion.light .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white } .liteAccordion.light .slide > h2.selected span, .liteAccordion.light .slide h2.selected span:hover, .liteAccordion.light .slide > h2.selected b { background: #ffffff } .liteAccordion.light .slide > div { background: #a0a0a0; margin-left: 5px } /**************************************** Stitch */ .liteAccordion.stitch { position: relative; padding: 5px 0 5px 5px; border: 11px solid #353535; background: #353535; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); } .liteAccordion.stitch:before { content: ''; width: 100%; height: 100%; position: absolute; top: -9px; left: -9px; background: #353535; border: 9px solid transparent; -webkit-border-image: url('bg_stitch.png') 9 repeat; -moz-border-image: url('bg_stitch.png') 9 repeat; -o-border-image: url('bg_stitch.png') 9 repeat; border-image: url('bg_stitch.png') 9 repeat; } .liteAccordion.stitch .slide > h2 { background: #353535 } .liteAccordion.stitch .slide > h2 span { height: auto; padding-right: 5%; color: white; text-shadow: -1px 1px 0 #5b5b5b; border: 9px solid transparent; background-image: url('bg_noise.png'); margin-top: 0; -webkit-border-image: url('bg_stitch.png') 9 repeat; -moz-border-image: url('bg_stitch.png') 9 repeat; -o-border-image: url('bg_stitch.png') 9 repeat; border-image: url('bg_stitch.png') 9 repeat; } .liteAccordion.stitch .slide > h2.selected:after { content: ''; display: block; height: 11px; width: 11px; position: absolute; bottom: -3px; right: 38px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); border: 9px solid transparent; border-top: 0; border-left: 0; -webkit-border-image: url('bg_stitch.png') 9 repeat; -moz-border-image: url('bg_stitch.png') 9 repeat; -o-border-image: url('bg_stitch.png') 9 repeat; border-image: url('bg_stitch.png') 9 repeat; background-image: url('bg_noise.png'); } .liteAccordion.stitch .slide:nth-child(1) > h2 span, .liteAccordion.stitch .slide:nth-child(1) > h2:after { background-color: #c25252 } .liteAccordion.stitch .slide:nth-child(2) > h2 span, .liteAccordion.stitch .slide:nth-child(2) > h2:after { background-color: #ca9859 } .liteAccordion.stitch .slide:nth-child(3) > h2 span, .liteAccordion.stitch .slide:nth-child(3) > h2:after { background-color: #96ba5f } .liteAccordion.stitch .slide:nth-child(4) > h2 span, .liteAccordion.stitch .slide:nth-child(4) > h2:after { background-color: #59abb7 } .liteAccordion.stitch .slide:nth-child(5) > h2 span, .liteAccordion.stitch .slide:nth-child(5) > h2:after { background-color: #bb6098 } .liteAccordion.stitch .slide > h2 b { top: 19%; color: white; text-shadow: 1px 1px 0 #5b5b5b } .liteAccordion.stitch .slide > div { margin-right: 6px } .liteAccordion.stitch.rounded > ol { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0 } /*************************************** Rounded */ .liteAccordion.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px } .liteAccordion.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px } /******************************************** IE */ /* stitch */ .liteAccordion.ie.stitch .slide > h2 { line-height: 265% } .liteAccordion.ie.stitch .slide > h2 span { height: 89%; padding-right: 8% } .liteAccordion.ie.stitch .slide > h2.selected:after { display: none } .liteAccordion.ie.stitch .slide-0 > h2 span { background-color: #c25252 } .liteAccordion.ie.stitch .slide-1 > h2 span { background-color: #ca9859 } .liteAccordion.ie.stitch .slide-2 > h2 span { background-color: #96ba5f } .liteAccordion.ie.stitch .slide-3 > h2 span { background-color: #59abb7 } .liteAccordion.ie.stitch .slide-4 > h2 span { background-color: #bb6098 } /* transforms */ .liteAccordion.ie7 .slide > h2 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) } .liteAccordion.ie7 .slide > h2 b { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) } .liteAccordion.ie8 .slide > h2 { filter: none; -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -ms-transform: none } .liteAccordion.ie8 .slide > h2 b { filter: none; -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -ms-transform: none } .liteAccordion.ie9 .slide > h2 { filter: none; -ms-filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top } .liteAccordion.ie9 .slide > h2 b { filter: none; -ms-filter: none; -ms-transform: rotate(90deg) } /* misc */ .liteAccordion.ie .slide > h2 b { top: 36%; left: 5% } .liteAccordion.ie.dark .slide > h2 b, .liteAccordion.ie.light .slide > h2 b { top: 44% } .liteAccordion.ie9.dark .slide > h2.selected span, .liteAccordion.ie9.dark .slide > h2.selected span:hover, .liteAccordion.light .slide > h2 span { filter: none } .liteAccordion.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); } .liteAccordion.ie9.stitch .slide > h2 b { top: 0; left: 10% } /* CSS3 accordion */ .css3accordion { border: 9px solid #353535; border-radius: 6px; padding: 5px 5px 6px 0; background: #030303; height: 320px; width: 960px; /* CSS3 shadows */ -webkit-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); } /* hide first level spans */ .css3accordion > span { display: none } /* main accordion styles and slides */ .css3accordion ol { height: 100%; list-style: none; overflow: hidden; position: relative; } .css3accordion li { float: left; height: 100%; overflow: hidden; position: relative; width: 48px; /* CSS3 transition for slides */ -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; } .css3accordion li a { display: block; float: left; height: 320px; position: relative; width: 48px; } /* slide headers */ .css3accordion h2 { font-size: 16px; font-weight: normal; height: 48px; left: 0; line-height: 265%; margin: 0; position: absolute; top: 0; width: 320px; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; } .css3accordion h2 span { background-color: #353535; border-radius: 4px; color: #fff; display: block; margin-top: 5px; padding-right: 10%; text-align: right; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .css3accordion h2 span:hover { background-color: #353535; background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555)); background: -webkit-linear-gradient(left, #353535 0%,#555555 100%); background: -moz-linear-gradient(left, #353535 0%, #555555 100%); background: -ms-linear-gradient(left, #353535 0%,#555555 100%); background: -o-linear-gradient(left, #353535 0%,#555555 100%); background: linear-gradient(left, #353535 0%,#555555 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 ); } /* 'counter' object */ .css3accordion h2 span:after { color: #080808; font-weight: bold; left: 10%; position: absolute; text-shadow: -1px 1px 0 #555555; top: 10%; /* CSS3 rotate for 'counter' */ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /* 'counter' values */ li.slide1 h2 span:after { content: "1"; } li.slide2 h2 span:after { content: "2"; } li.slide3 h2 span:after { content: "3"; } li.slide4 h2 span:after { content: "4"; } li.slide5 h2 span:after { content: "5"; } /* inner slide content */ .css3accordion li div { margin-left: 5px; padding-left: 48px; } /* CSS3 accordion */ .css3accordion { border: 9px solid #353535; border-radius: 6px; padding: 5px 5px 6px 0; background: #030303; height: 320px; width: 960px; /* CSS3 shadows */ -webkit-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); } /* hide first level spans */ .css3accordion > span { display: none } /* main accordion styles and slides */ .css3accordion ol { height: 100%; list-style: none; overflow: hidden; position: relative; } .css3accordion li { float: left; height: 100%; overflow: hidden; position: relative; width: 48px; /* CSS3 transition for slides */ -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; } .css3accordion li a { display: block; float: left; height: 320px; position: relative; width: 48px; } /* slide headers */ .css3accordion h2 { font-size: 16px; font-weight: normal; height: 48px; left: 0; line-height: 265%; margin: 0; position: absolute; top: 0; width: 320px; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; } .css3accordion h2 span { background-color: #353535; border-radius: 4px; color: #fff; display: block; margin-top: 5px; padding-right: 10%; text-align: right; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* 'counter' object */ .css3accordion h2 span:after { color: #080808; font-weight: bold; left: 10%; position: absolute; text-shadow: -1px 1px 0 #555555; top: 10%; /* CSS3 rotate for 'counter' */ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /* 'counter' values */ li.slide1 h2 span:after { content: "1"; } li.slide2 h2 span:after { content: "2"; } li.slide3 h2 span:after { content: "3"; } li.slide4 h2 span:after { content: "4"; } li.slide5 h2 span:after { content: "5"; } /* inner slide content */ .css3accordion li div { margin-left: 5px; padding-left: 48px; } /* auto animation */ .css3accordion li { -webkit-animation-name: anim_slides; -webkit-animation-duration: 25.0s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 25.0s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } .css3accordion li:nth-child(2) { -webkit-animation-delay: 5.0s; -moz-animation-delay: 5.0s; } .css3accordion li:nth-child(3) { -webkit-animation-delay: 10.0s; -moz-animation-delay: 10.0s; } .css3accordion li:nth-child(4) { -webkit-animation-delay: 15.0s; -moz-animation-delay: 15.0s; } .css3accordion li:nth-child(5) { -webkit-animation-delay: 20.0s; -moz-animation-delay: 20.0s; } @-webkit-keyframes anim_slides { 0% { width: 48px; } 20% { width: 768px; } 40% { width: 48px; } 100% { width: 48px; } } @-moz-keyframes anim_slides { 0% { width: 48px; } 20% { width: 768px; } 40% { width: 48px; } 100% { width: 48px; } }

LANGKAH BERIKUTNYA :

Masuk ke akun blogger anda -> Klik Drop down menu
Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS diatas tepat diatas kode ]]></b:skin>
Simpan template...

Happy Blogging..!

Pages

Cara membuat galeri photo menggunakan animasi CSS3 accordion