.carousel .item
{
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    opacity:0;
}
.carousel .carousel-inner .active {
  opacity: 1;
}
.carousel .active.left, .carousel .active.right
{
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel .next.left, .carousel .prev.right
{
    left: 0;
    opacity: 1;
    z-index: 1;
}
.carousel .carousel-control {
  z-index: 2;
}
.left.carousel-control, .right.carousel-control
{
    opacity: 0;
    transition: all 0.5s ease-out 0s;
}
.left.carousel-control:hover, .right.carousel-control:hover
{
    opacity: 1;
    transition: all 0.5s ease-in 0s;
}