.one-third-column { width: 33.333333%; float: left; padding-left: 10px; padding-right: 10px; } .card-image { display: table; height: 120px; width: 100%; border-radius: 4px; } .card-image .card-image-cell { display: table-cell; vertical-align: middle; } .card-image h3 { margin: 0; font-size: 1.5em; color: white; } .card-image a { color: #fff; } .card-description { height: 3em; overflow: hidden; } .card:hover, .card:active { text-decoration: none; } .card .thumbnail { border: 1px solid rgba(0,0,0,0.075); border-bottom-color: rgba(0,0,0,0.125); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05),0 5px 10px rgba(0,0,0,0.05); -webkit-transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; opacity: 0.8; overflow-x: hidden; } .card .thumbnail:hover{ border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.15); box-shadow:0 2px 4px rgba(0,0,0,0.05),0 10px 18px rgba(0,0,0,0.1); opacity: 1; } .card .thumbnail:hover .card-title a{ color:#000; text-decoration:none; } .thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out } .thumbnail .caption { padding: 9px; color: #333; } .card-text { font-size: 0.75em; display: inline; } .card-text .meta-info { margin-right: 10px; }