"box card js"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="cards-wrapper"> <div class="card-wrapper"> <div class="card-1 card-object card-object-hf"><a class="face front" href="#"> <div class="title-wrapper"> <div class="title">Jenny</div> <div class="subtitle">felis hairyus</div> </div></a><a class="face back" href="#"> <div class="img-wrapper"> <div class="avatar"></div> </div> <div class="info-wrapper"> <div class="info-title">Jenny</div> <ul class="info-content"> <li class="info-content-item">Age <span>6 years</span></li> <li class="info-content-item">Length <span>46cm</span></li> <li class="info-content-item">Weight <span>4kg</span></li> </ul> </div></a></div> </div> <div class="card-wrapper"> <div class="card-2 card-object card-object-hf"><a class="face front" href="#"> <div class="title-wrapper"> <div class="title">Mishka</div> <div class="subtitle">felis catus</div> </div></a><a class="face back" href="#"> <div class="img-wrapper"> <div class="avatar"></div> </div> <div class="info-wrapper"> <div class="info-title">Mishka</div> <ul class="info-content"> <li class="info-content-item">Age <span>7 years</span></li> <li class="info-content-item">Length <span>42cm</span></li> <li class="info-content-item">Weight <span>3.8kg</span></li> </ul> </div></a></div> </div> <div class="card-wrapper"> <div class="card-3 card-object card-object-hf"><a class="face front" href="#"> <div class="title-wrapper"> <div class="title">Kyra</div> <div class="subtitle">felix pumus</div> </div></a><a class="face back" href="#"> <div class="img-wrapper"> <div class="avatar"></div> </div> <div class="info-wrapper"> <div class="info-title">Kyra</div> <ul class="info-content"> <li class="info-content-item">Age <span>5 years</span></li> <li class="info-content-item">Length <span>50cm</span></li> <li class="info-content-item">Weight <span>5.2kg</span></li> </ul> </div></a></div> </div> </div> <script> var $cards = $('.card-object'), $faceButtons = $('.face'); $faceButtons.on('click', flipCard); function flipCard(event) { event.preventDefault(); var $btnFace = $(this), $card = $btnFace.parent('.card-object'); if( $card.hasClass('flip-in') ) { closeCards(); } else { closeCards(); openCard($card); } } function closeCards() { $cards .filter('.flip-in') .removeClass('flip-in') .addClass('flip-out'); } function openCard($card) { $card .removeClass('flip-out') .addClass('flip-in'); } </script>
@import url('https://fonts.googleapis.com/css?family=Archivo+Black'); body { font: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #cfcfcf; background: -webkit-linear-gradient(45deg, rgba(22, 167, 175, 0.6) 5%, rgba(23, 27, 158, 0.7) 55%, rgba(68, 9, 82, 0.5) 100%) no-repeat; background: linear-gradient(45deg, rgba(22, 167, 175, 0.6) 5%, rgba(23, 27, 158, 0.7) 55%, rgba(68, 9, 82, 0.5) 100%) no-repeat; background-size: 200%; color: #FFF; } html, body { height: 100%; } .cards-wrapper { position: relative; height: 100%; list-style: none; margin: 0; padding: 0 5%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card-wrapper { display: block; float: left; position: relative; margin: 0; width: 28%; height: 0; padding: 0 0 28%; -webkit-perspective: 700px; perspective: 700px; } .card-object { color: #FFF; display: block; float: left; position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .card-object.card-1 .front { background: #222 url(http://s7.qtrpages.info/storage/app/media/2.jpg) 90% 35%; background-size: 115%; } .card-object.card-1 .back .img-wrapper { background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 70% 45%; background-size: 160%; } .card-object.card-1 .back .avatar { background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 40% 20%; background-size: 130% 130%; } .card-object.card-2 .front { background: #222 url(http://s7.qtrpages.info/storage/app/media/2.jpg) 50% 90% no-repeat; background-size: 105%; } .card-object.card-2 .back .img-wrapper { background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 70% 50%; background-size: 140%; } .card-object.card-2 .back .avatar { background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 50% 50% no-repeat; background-size: 140% 140%; } .card-object.card-3 .front { background: #222 url(http://s7.qtrpages.info/storage/app/media/2.jpg) 80% 100% no-repeat; background-size: 108%; } .card-object.card-3 .back .img-wrapper { background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 90% 40% no-repeat; background-size: 115%; } .card-object.card-3 .back .avatar { background: #fff url(http://s7.qtrpages.info/storage/app/media/2.jpg) 0 50% no-repeat; background-size: 120% 120%; } .card-object.flip-in.card-1, .card-object.flip-in.card-3 { -webkit-animation: flip-in-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; animation: flip-in-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; } .card-object.flip-in.card-2 { -webkit-animation: flip-in-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; animation: flip-in-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; } .card-object.flip-out.card-1, .card-object.flip-out.card-3 { -webkit-animation: flip-out-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; animation: flip-out-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; } .card-object.flip-out.card-2 { -webkit-animation: flip-out-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; animation: flip-out-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; } .card-object-hf .back { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .face { color: #fff; text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .face.front { z-index: 20; background-repeat: no-repeat; background-position: 50% 50%; } .face.front::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.1) 100%) no-repeat; background: linear-gradient(45deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.1) 100%) no-repeat; opacity: .8; z-index: 20; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } .face.front::after { position: absolute; top: 7%; right: 7%; bottom: 7%; left: 7%; border: 1px solid rgba(255, 255, 255, 0.35); z-index: 100; content: ""; } .face.front .title-wrapper { position: absolute; bottom: 3%; left: 25%; right: 25%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -ms-flex-wrap: wrap; flex-wrap: wrap; z-index: 100; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform .28s ease; transition: -webkit-transform .28s ease; transition: transform .28s ease; transition: transform .28s ease, -webkit-transform .28s ease; } .face.front .title-wrapper .title { position: relative; font-family: 'Archivo Black', sans-serif; width: 100%; text-transform: uppercase; font-size: 2vw; line-height: 1; opacity: .8; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } .face.front .title-wrapper .title::after { display: block; margin: 7% auto 8% auto; width: 100%; height: 1px; content: ""; background-color: #fff; opacity: .5; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform .15s; transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; } .face.front .title-wrapper .subtitle { font-size: .9vw; line-height: 1; letter-spacing: 1px; text-transform: uppercase; opacity: 0; -webkit-transition: opacity .15s; transition: opacity .15s; } .face.front:hover::before { opacity: .9; } .face.front:hover .title-wrapper { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .face.front:hover .title-wrapper .title { opacity: 1; } .face.front:hover .title-wrapper .title::after { -webkit-transform: scale(1); transform: scale(1); opacity: .5; -webkit-transition-delay: .15s; transition-delay: .15s; -webkit-transition-duration: .2s; transition-duration: .2s; } .face.front:hover .title-wrapper .subtitle { opacity: .7; -webkit-transition-delay: .2s; transition-delay: .2s; -webkit-transition-duration: .2s; transition-duration: .2s; } .face.back { color: #222; background: #fff; z-index: 10; } .info-container { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; top: 6%; right: 6%; bottom: 6%; left: 6%; padding: 0; } .img-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 38%; z-index: 10; } .img-wrapper::after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(14, 6, 70, 0.6); opacity: .7; } .avatar { position: absolute; left: 50%; height: 68%; width: 25.84%; display: block; border-radius: 50%; margin-top: 25.08%; margin-left: -12.92%; background-color: #fff; border: 3px solid #FFF; z-index: 20; } .info-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; position: absolute; top: 50.92%; left: 0; right: 0; bottom: 0; padding: 4% 15% 15%; } .info-title { font-size: 1.5vw; font-family: 'Archivo Black', sans-serif; text-align: left; padding: 0; margin: 0; text-align: center; display: block; width: 100%; } .info-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 8% 0 0; margin: 8% 0 0; border-top: 1px solid #e0e0e0; } .info-content-item { color: #222; font-size: .75vw; line-height: 1; text-align: center; display: inline-block; padding: 0; margin: 0; text-transform: uppercase; color: #aaa; } .info-content-item span { display: block; font-weight: bold; font-size: 1.1vw; margin-top: 7px; text-transform: none; color: #222; } /** * ---------------------------------------- * ANIMATIONS * ---------------------------------------- */ @-webkit-keyframes flip-in-hor-1 { 0% { -webkit-transform: translateY(0) translateZ(0) rotateX(0); transform: translateY(0) translateZ(0) rotateX(0); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } 100% { -webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg); transform: translateY(-100%) translateZ(100px) rotateX(-180deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } } @keyframes flip-in-hor-1 { 0% { -webkit-transform: translateY(0) translateZ(0) rotateX(0); transform: translateY(0) translateZ(0) rotateX(0); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } 100% { -webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg); transform: translateY(-100%) translateZ(100px) rotateX(-180deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } } @-webkit-keyframes flip-out-hor-1 { 0% { -webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg); transform: translateY(-100%) translateZ(100px) rotateX(-180deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } 100% { -webkit-transform: translateY(0) translateZ(0) rotateX(0); transform: translateY(0) translateZ(0) rotateX(0); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } } @keyframes flip-out-hor-1 { 0% { -webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg); transform: translateY(-100%) translateZ(100px) rotateX(-180deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } 100% { -webkit-transform: translateY(0) translateZ(0) rotateX(0); transform: translateY(0) translateZ(0) rotateX(0); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } } @-webkit-keyframes flip-in-hor-2 { 0% { -webkit-transform: translateY(0) translateZ(0) rotateX(0); transform: translateY(0) translateZ(0) rotateX(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } 100% { -webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg); transform: translateY(100%) translateZ(100px) rotateX(180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } } @keyframes flip-in-hor-2 { 0% { -webkit-transform: translateY(0) translateZ(0) rotateX(0); transform: translateY(0) translateZ(0) rotateX(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } 100% { -webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg); transform: translateY(100%) translateZ(100px) rotateX(180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } } @-webkit-keyframes flip-out-hor-2 { 0% { -webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg); transform: translateY(100%) translateZ(100px) rotateX(180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } 100% { -webkit-transform: translateY(0) translateZ(0) rotateX(0); transform: translateY(0) translateZ(0) rotateX(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } } @keyframes flip-out-hor-2 { 0% { -webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg); transform: translateY(100%) translateZ(100px) rotateX(180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } 100% { -webkit-transform: translateY(0) translateZ(0) rotateX(0); transform: translateY(0) translateZ(0) rotateX(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } }

Related: See More


Questions / Comments: