Hover Card Slider

A cool plugin I made for fun. IT's 100% responsive, but you have to do the math in CSS if you add or remove an item.

by Ryan Brackett

HTML

Hover it. Click it. Responsive it. IE9 and up
<br/>
<br/>
<div class="container">
  <div class="item" id="item-001"></div>
  <div class="item" id="item-002"></div>
  <div class="item" id="item-003"></div>
  <div class="item" id="item-004"></div>
  <div class="item" id="item-005"></div>
</div>

CSS

body {
  font-family: arial;
  font-size: 12px;
}

.container {
  width: 100%;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
}

.container .item {
  width: 20%;
  height: 300px;
  float: left;
  position: relative;
  cursor: pointer;
  color: white;
  font-weight: bold;
  text-align: center;
  -webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
}

.container.active .item {
  width: 15%;
}

.container .item.active {
  width: 40%;
}

.container.clicked .item {
  width: 10%;
}

.container .item.clicked {
  width: 60%;
}

#item-001 {
  background-color: black;
}

#item-002 {
  background-color: #dedede;
}

#item-003 {
  background-color: #ededed;
}

#item-004 {
  background-color: #dedede;
}

#item-005 {
  background-color: #bb4a3a;
}

JavaScript

//start 
$('.container > .item').mouseover(

  function() {
    $(".container > .item").removeClass("active");
    $(".container").toggleClass("active");
    $(this).toggleClass("active");
  });
$('.container > .item').mouseleave(

  function() {
    $(".container > .item").removeClass("active");
    $(".container").removeClass("active");
    $(".container").removeClass("clicked");
    $(".container > .item").removeClass("clicked");
  });
$('.container > .item').click(

  function() {
    $(this).toggleClass("clicked");
    $(".container").toggleClass("clicked");
  });
//end