<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="container"> <h1>Element Cards</h1> <div class="row"> <!-- CHARACTER --> <div class="col-md-2"> <div class="card CHAR"> <div class="card-img"> <img src="http://i.imgur.com/yIUgF5Y.jpg" alt="Avatar"> </div> <div class="cardcontainer text-center" title="Character herpa derpa do"> Leyra Quinn-Io </div> </div> </div> <!-- LOCATION --> <div class="col-md-2"> <div class="card LOC"> <div class="card-img"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Bischofferode_Grotte01.jpg/294px-Bischofferode_Grotte01.jpg" alt="Avatar" > </div> <div class="cardcontainer text-center"> Location </div> </div> </div> <!-- OBJECT --> <div class="col-md-2"> <div class="card OBJ"> <div class="card-img"> <img src="http://vignette2.wikia.nocookie.net/zelda/images/8/80/Master_Sword_%28Ocarina_of_Time%29.png/revision/latest?cb=20090421233552" alt="Avatar"> </div> <div class="cardcontainer text-center"> Object </div> </div> </div> <!-- OTHER --> <div class="col-md-2"> <div class="card OTH"> <div class="card-img"> <img src="http://www.opeduca.eu/images/Methodology-PDCA2.jpg" alt="Avatar"> </div> <div class="cardcontainer text-center"> Other </div> </div> </div> <!-- EMPTY CHARACTER --> <div class="col-md-2"> <div class="card CHAR"> <div class="card-img empty"></div> <div class="cardcontainer"> Other </div> </div> </div> <!-- EMPTY LOCATION --> <div class="col-md-2"> <div class="card LOC"> <div class="card-img empty"></div> <div class="cardcontainer"> Other </div> </div> </div> <!-- EMPTY OBJECT --> <div class="col-md-2"> <div class="card OBJ"> <div class="card-img empty"></div> <div class="cardcontainer"> Other </div> <a class="card-link" href=""></a> </div> </div> <!-- EMPTY OTHER --> <div class="col-md-2"> <div class="card OTH"> <div class="card-img empty"></div> <div class="cardcontainer"> Other </div> </div> </div> </div> </div>

.cardcontainer { position: absolute; bottom:0px; left: 0px; right: 0px; width: inherit; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; font-size: 16px; background-color: grey; background-color: rgba(200,200,200,0.6); } .card { /* Add shadows to create the "card" effect */ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; position: relative; margin-bottom: 10px; border: 1px solid; border-color: #ccc; } /* On mouse-over, add a deeper shadow */ .card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } .card img { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; } .card-img { position:relative; height:165px; overflow:hidden; } .portrait { width: 100%; } .landscape { height: 100%; } .empty { font-family: 'Glyphicons Halflings'; font-size: 20vh; color: grey; padding: auto; text-align: center; } .cardcontainer::before { float: left; font-family: 'Glyphicons Halflings'; margin-right: 8px; } .empty { font-family: 'Glyphicons Halflings'; font-size: 20vh; color: grey; padding: auto; text-align: center; } .cardcontainer::before { float: left; font-family: 'Glyphicons Halflings'; margin-right: 8px; } .card.CHAR .empty::after, .card.CHAR .cardcontainer::before { content: "\e008"; } .card.LOC .empty::after, .card.LOC .cardcontainer::before { content: "\e062"; } .card a.card-link { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .card.OBJ .empty::after, .card.OBJ .cardcontainer::before { content: "\e136"; } .card.OTH .empty::after, .card.OTH .cardcontainer::before { content: "\2a"; }

$(document).ready(function() { var imgs = $('.card img');//jQuery class selector imgs.each(function(){ var img = $(this); var width = img.width(); //jQuery width method var height = img.height(); //jQuery height method if(width < height){ img.addClass('portrait'); }else{ img.addClass('landscape'); } }) });