<style>
* {
margin: 0;
padding: 0;
}
.accordian {
width: 805px; height: 320px;
overflow: hidden;
margin: 100px auto;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
width: 2000px;
}
.accordian li {
position: relative;
display: block;
width: 160px;
float: left;
border-left: 1px solid #888;
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordian ul:hover li {width: 40px;}
.accordian ul li:hover {width: 640px;}
.accordian li img {
display: block;
}
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0;
width: 640px;
}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
font-size: 16px;
}
</style>
<div class="accordian">
<ul>
<li>
<div class="image_title">
<a href="#">Woman at the Desert</a>
</div>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOjVoTyGkc28Vs5tPnpONK42qPyzfDWdb9Tw2CKE0HZ_C4u4FseUvzU6bmWIQ6PoyVZqebgM6BPd-DV-XjBiFHHaExBQ4BQagSkiHz0iHYucAE-G59L9vPlVc8BiKughvR-CL_VV_abI/s1600/women+in+desert.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Woman in Red</a>
</div>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXn58EMTThCdXXqrBPDnFYyFfvA1YkHP8IUTYiNeJGVnPCPyKv7Wx0_NX1pP-n8azMU61_0cRDaLKbzUZs_vnmts5CLTY2UPOhKJ9Mt4EkRsqwRSuqqqqaZmkEASh9H_kbcJZ5MP7qkxI/s1600/women+in+red.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Woman at the Garden</a>
</div>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTCJ6ll5xsgbCawIo3Jmgj0rRMJSyQWrR-VG5mnLcOtWpvLZYjT-H3Oqq1PowAXynWTXsJOlPcIG8fsBswefGbnFamxub0QiOIT-fL-XU3gOyytsQDPKX9BT_hqcDnRG4i1fvD6WEMoVw/s1600/women+in+garden2.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Woman at the Forest</a>
</div>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8wd1G4cyDY3C-aBTp9nXlASNPT8l5gmNLvO8n2z6m5kn2pbkW3ceML9Nlx7bUOBf3igKxSUOTJlD6aT4yU0b7fxxHy8xL83URrssjNU_alPmKkVE2ksxwlRPi9TRvFPfAjZ0m2jzruE/s1600/women+in+forest.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Woman at the Beach</a>
</div>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxfW7g1tgy1Y9eKz4VV12yyjD-EFmQ1S5rDCxg2CLL8jdqPBoztJVbDDUnsGHWfDtW7eMhAuJY9MM9nhoc7gJ4KqQk5TXOJxszVroAWqgBFdpM83g_GZTZq5JAb5p4Xu620oLOlleqxo0/s1600/women+in+beach.jpg"/>
</a>
</li>
</ul>
</div>
0 komentar:
Posting Komentar