Download Image flipcard

Using Bootcards for flipping.

by Virtual

HTML

<link rel="stylesheet" href="//www.montana.edu/msucommon/base/css/styles.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="flip-container col-sm-12 bootcards-cards" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper ">
                <div class="front panel panel-default bootcards-file">
                    <img src="http://placekitten.com/g/200/300" />
                </div>
                <div class="back panel panel-default bootcards-file">
                    <div class="panel-heading">
                         <h3 class="panel-title">Image Information</h3>

                    </div>
                    <div class="list-group">
                        <div class="list-group-item">
                             <h4 class="list-group-item-heading">
        <a href="#">
        Smitten Kittens
        </a>
      </h4>

                            <p class="list-group-item-text">Type: <strong>.jpg</strong> (3.2Mb)</p>
                        </div>
                        <div class="list-group-item">
                            <p class="list-group-item-text"><strong>Added by John Smith on 5 March 2014</strong>

                            </p>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div class="btn-group btn-group-justified">
                            <div class="btn-group">
                                <button class="btn btn-default"> <i class="fa fa-arrow-down"></i>
Download</button>
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-default"> <i class="fa fa-star"></i>
Favorite</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
       ...

CSS

/* entire container, keeps perspective */
 .flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
 .flip-container:hover .back {
    transform: rotateY(0deg);
}
.flip-container:hover .front {
    transform: rotateY(180deg);
}
.flip-container, .front, .back {
    width: 320px;
    height: 300px;
}
/* flip speed goes here */
 .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
/* hide back of pane during swap */
 .front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}
/*  UPDATED! front pane, placed above back */
 .front {
    z-index: 2;
    transform: rotateY(0deg);
}
/* back, initially hidden pane */
 .back {
    transform: rotateY(-180deg);
}
/* 
	Some vertical flip updates 
*/
 .vertical.flip-container {
    position: relative;
}
.vertical .back {
    transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
    transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
    transform: rotateX(180deg);
}
/* stylized */
 .front img {
    width:100%;
    height:auto;
    cursor:pointer;
}