"3-d card img"
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 ----------> <div class="box"> <div class="card"> <div class="left"><img src="https://wallpaperscraft.com/image/henry_cavill_actor_owl_photoshoot_111358_750x1334.jpg" alt=""/></div> <div class="right"> <div class="middle-bar"><i class="material-icons">arrow_back</i><span class="stari material-icons">star</span></div> <div class="bio btn"> <div class="head"><a href="#">ACTOR</a></div> </div> <h1>Henry <em>William</em> Cavill</h1> <p class="bio-text">Henry William Dalgliesh Cavill ( born 5 May 1983) is a British actor. Cavill began his career starring in the film adaptations of <a href="#"> <The>Count of Monte Cristo</The></a> (2002) and <a href="#"> I Capture the Castle</a> (2003). He later appeared in minor and supporting roles in television shows such as BBC's The Inspector Lynley Mysteries, ITV's Midsomer Murders and Showtime's <a href="#"> The Tudors</a> (2007-10), then crossed to mainstream Hollywood films such as <a href=""> Tristan & Isolde</a> (2006), <a href="#"> Stardust </a> (2007), <a href="#"> Blood Creek</a> (2009) and <a href="#"> Immortals</a> (2011)</p> <button class="btn-bio">Full Bio</button> </div> </div> </div>
* { box-sizing: border-box; } body { background: #4fc4ca; width: 100%; height: 100%; font-family: 'Helvetica' , sans-serif; } .box { margin: 5em auto; width: 680px; height: 430px; background: #F4F4F4; } .left { z-index: 100; position: relative; top: -35px; left: 25px; float: left; width: 290px; } .left img { width: 280px; height: 500px; border-radius: 5px; box-shadow: -5px 6px 15px 1px rgba(0, 0, 0, 0.4); } .right { position: relative; top: 15px; left: 45px; margin: 0; width: calc(680px - 390px); height: 430px; float: left; } .middle-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: #9c9ea2; cursor: pointer; } span { color: #fbcd43; } .btn { text-align: center; } .head a { list-style: none; text-decoration: none; background: #222831; padding: 10px 15px; color: #f7f7f7; } .head a:hover { background: #16191f; } .bio-text { color: #666; font-size: 14px; } a { color: #223; font-weight: bold; } a:hover { text-decoration: none; } button { position: relative; top: 10px; left: 80px; } .btn-bio { background: transparent; padding: 10px 25px; width: 150px; border-radius: 25px; border: 1px solid #7fd6da; color: #7fd6da; cursor: pointer; } .btn-bio:hover { color: red; box-shadow: 0 6px 15px 1px rgba(0, 0, 0, 0.3); } .btn-bio:focus { outline: 0; }

Related: See More


Questions / Comments: