Amazing Accordion ShowCase Widget using Pure CSS3

Hi guys! Welcome another CSS3-WIDGET. We had created some amazing CSS3-Widgets in previous tutorial(ex:-AMAZING PHOTO FLIP EFFECT USING PURE CSS3).
Today's tutorial we will learn how to create Amazing Accordion Style Image Show case widget using Pure CSS3. Ya! we won't use any JavaScript or Jquery for this effect. Instead we will use Our new CSS3 Transactions.
Amazing Accordion ShowCase Widget using Pure CSS3


demo

download

HTML

<div class="showcase">  
<ul>  
<li>  
<div class="image_title">  
<a href="#">KungFu Panda</a>  
</div>  
<a href="#">  
<img src="img/panda.jpg"/>  
</a>  
</li>  
<li>  
<div class="image_title">  
<a href="#">Toy Story 2</a>  
</div>  
<a href="#">  
<img src="img/toystory.jpg"/>  
</a>  
</li>  
<li>  
<div class="image_title">  
<a href="#">Wall-E</a>  
</div>  
<a href="#">  
<img src="img/walle.jpg"/>  
</a>  
</li>  
<li>  
<div class="image_title">  
<a href="#">Up</a>  
</div>  
<a href="#">  
<img src="img/up.jpg"/>  
</a>  
</li>  
<li>  
<div class="image_title">  
<a href="#">Cars 2</a>  
</div>  
<a href="#">  
<img src="img/cars2.jpg"/>  
</a>  
</li>  
</ul>  
</div>  
<script type="text/javascript" src="http://labs.techumber.com/LABS/js/prefixfree.min.js"></script> 

Here we take a list of images in ul. Please observe the last line of code. We adding prefixfree script. This script help us to getred of the css3 vander prefixs like -webkit-,-moz,etc.
Styleing

.showcase { 
width: 805px;  
height: 320px;  
overflow: hidden;  
margin: 0px auto;  
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);  
} 
.showcase ul { 
width: 2000px;  
} 
.showcase 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);  
transition: all 0.5s;  
} 
.showcase ul:hover li {width: 40px;} 
.showcase ul li:hover {width: 640px;} 
.showcase 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;  
} 

Reference http://thecodeplayer.com/walkthrough/make-an-accordian-style-slider-in-css3

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.