Amazing Accordion ShowCase Widget using Pure CSS3

Published on January 7, 2013

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.

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="//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 //thecodeplayer.com/walkthrough/make-an-accordian-style-slider-in-css3