"info card"
Bootstrap 3.3.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <html> <head> <meta charset="UTF-8"/> <link href='https://fonts.googleapis.com/css?family=Domine:400,700' rel='stylesheet' type='text/css'> </head> <body> <div class="container"> <div class="info-card-container"> <div class="info-card"> <div class="info-card__image-exposure info-card__content"> <div class="info-card__image-exposure--blend"> </div> <div class="info-card__image-exposure__item"> </div> </div> <div class="info-card__bio info-card__content"> <h2 class="info-card__bio--title">John Legend</h2> <p class="info-card__bio--copy">John Roger Stephens (born December 28, 1978), better known by his stage name John Legend, is an American singer, songwriter and actor. He has won ten Grammy Awards, one Golden Globe, and one Academy Award. In 2007, Legend received the Hal David Starlight Award from the Songwriters Hall of Fame.</p> <p class="info-card__bio--copy">Prior to the release of Legend's debut album, his career gained momentum through a series of successful collaborations with multiple established artists. He sang in Magnetic Man's "Getting Nowhere," Kanye West's "All of the Lights", on Slum Village's "Selfish", and Dilated Peoples' "This Way". Other artists included Jay Z's "Encore", and he sang backing vocals on Alicia Keys' 2003 song "You Don't Know My Name", the Kanye West remix of Britney Spears' "Me Against the Music", and Fort Minor's "High Road". Legend played piano on Lauryn Hill's "Everything Is Everything".</p> </div> <span class="close"></span> </div> </div> </div> </body> </html>
/***** Info Card Component *****/ /*******************************/ html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */ .info-card-container { width: 100%; min-height: 100%; height: 83rem; overflow: hidden; background: -webkit-linear-gradient(left, #0C1B23 0%, #0C1B23 70%, #fff 70%, #fff 100%); background: linear-gradient(to right, #0C1B23 0%, #0C1B23 70%, #fff 70%, #fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$white', endColorstr='$white',GradientType=1 ); /* IE6-9 */ position: relative; } .info-card { min-width: 80%; max-width: 90rem; min-height: 70%; height: 70rem; margin: 0 auto; position: relative; background-color: #fff; box-shadow: 0.01rem 0.01rem 1rem #0C1B23; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .info-card__content { float: left; height: 100%; position: relative; overflow: hidden; } .info-card__image-exposure { width: 45%; } .info-card__bio { width: 40%; padding: 5rem; height: auto; font-family: 'Domine', serif; } .info-card__bio--title { color: #141D1D; font-size: 3.5rem; font-weight: 300; } .info-card__bio--copy { color: #9da09f; line-height: 2; } .info-card__image-exposure__item { background-image: url("http://s21.postimg.org/asn53rlg7/john_legend.png"); background-color: #fff; background-position: 80% 50%; background-repeat: no-repeat; height: 100%; width: 100%; display: inline-block; position: absolute; opacity: 0.9; } .info-card__image-exposure--blend { background-image: url("http://s23.postimg.org/lcnfbeesr/blend1.jpg"); background-repeat: no-repeat; background-color: #fff; mix-blend-mode: soft-light; background-position: -5rem; width: 100%; height: 100%; z-index: 1; position: absolute; -webkit-animation: blendAnimate 30s linear infinite; animation: blendAnimate 30s linear infinite; } .close { width: 2rem; height: 0.25rem; background-color: #000; position: absolute; top: 2.5rem; right: 2rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); cursor: pointer; } .close:before { content: ''; display: block; width: 2rem; height: 0.25rem; background: #000; position: absolute; top: 0; right: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } @-webkit-keyframes blendAnimate { 0% { background-position: 0; } 50% { background-position: 100% 100%; } 100% { background-position: 0; } } @keyframes blendAnimate { 0% { background-position: 0; } 50% { background-position: 100% 100%; } 100% { background-position: 0; } }

Related: See More


Questions / Comments: