CSS3 Horizontal Accordion Demo

Badge
  • Megamind Poster
    Megamind
  • Megamind Trailer
  • Megamind Synopsis
    Megamind From the studio that brought you 'Shrek', 'Madagascar' and 'Kung Fu Panda'. 'Megamind' is the most brilliant supervillain the world has ever known. And the least successful. Over the years, he has tried to conquer Metro City in every imaginable way. Each attempt, a colossal failure thanks to the caped superhero known as "Metro Man," an invincible hero until the day Megamind actually kills him in the throes of one of his botched evil plans. Suddenly, Megamind has no purpose. A supervillain without a superhero. He realizes that achieving his life's ambition is the worst thing that ever happened to him. Megamind decides that the only way out of his rut is to create a new hero opponent called "Titan", who promises to be bigger, better and stronger than Metro Man ever was.
  • Megamind Pictures

Notes

  • This accordion slider has been built using pure CSS and no JavaScript has been used.
  • It can be used as a gallery (video or image), product tour, portfolio showcase, content slider etc.
  • There are three examples and they support all modern browsers including IE7+.
  • Transitions work in Chrome4+, Safari 4+, Opera 10.5+, Firefox 4+ and IE9+.
  • The accordion is fired by :hover pseudo class, however you can easily add a click function with javascript.
  • You can download the examples and use them in any kind of projects without any licence issue.
See other examples:   Content Slider | A Simple Website | Video Gallery or Download source code
Browse Premium Scripts: Easy Video Sharing Script

IMDB Scraper

Other Freebies: Best CSS3 Button Maker: Button X