"360 choose flexline"
Bootstrap 3.3.0 Snippet by enghed

<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"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="http://www.kabe.se/images/models/exterior/h880etdl-outside.jpg" alt=""> <div class="overlay"> <p>VÄLJ PLANLÖSNING:<br> <a href="http://360factory.com/se/kabe/2017/classic-660-gdl-ks/" target="_blank">GDL</a> <a href="http://360factory.com/se/kabe/2017/classic-660-gdl-ks/" target="_blank">DGDL</a> </p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="http://www.kabe.se/images/models/exterior/agle-outside.jpg" alt=""> <div class="overlay"> <p>VÄLJ PLANLÖSNING:<br> <a href="http://360factory.com/se/kabe/2017/classic-660-gdl-ks/" target="_blank">FK</a> </p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="http://www.kabe.se/images/models/exterior/agle-outside.jpg" alt=""> <div class="overlay"> <p>VÄLJ PLANLÖSNING:<br> <a href="http://360factory.com/se/kabe/2017/classic-660-gdl-ks/" target="_blank">GDL</a> <a href="http://360factory.com/se/kabe/2017/classic-660-gdl-ks/" target="_blank">DGDL</a> <a href="http://360factory.com/se/kabe/2017/classic-660-gdl-ks/" target="_blank">ETDL</a> </p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="http://www.kabe.se/images/models/exterior/agle-outside.jpg" alt=""> <div class="overlay"> <p>VÄLJ PLANLÖSNING:<br> <a href="http://360factory.com/se/kabe/2017/classic-660-gdl-ks/" target="_blank">GDL</a> <a href="http://360factory.com/se/kabe/2017/classic-660-gdl-ks/" target="_blank">DGDL</a> <a href="http://360factory.com/se/kabe/2017/classic-660-gdl-ks/" target="_blank">ETDL</a> </p> </div> </div> </div> </div> </div>
.hovereffect { width: 100%; max-width: 263px; height: 100%; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; background: -webkit-linear-gradient(45deg, #e30613 0%, #ff4a55 100%); background: linear-gradient(45deg, #e30613 0%,#ff4a55 100%); } .hovereffect .overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; padding: 3em; text-align: left; } .hovereffect img { display: block; position: relative; max-width: none; max-width: 263px; -o-transition: opacity 0.35s, -webkit-transform 0.45s; -ms-transition: opacity 0.35s, -webkit-transform 0.45s; -moz-transition: opacity 0.35s, -webkit-transform 0.45s; -webkit-transition: opacity 0.35s, -webkit-transform 0.45s; transition: opacity 0.35s, transform 0.45s; -o-transform: translate3d(0px,0,0); -ms-transform: translate3d(0px,0,0); -moz-transform: translate3d(0px,0,0); -webkit-transform: translate3d(0px,0,0); transform: translate3d(0px,0,0); } .hovereffect h2 { text-transform: uppercase; color: #fff; position: relative; font-size: 17px; background-color: transparent; padding: 15% 0 10px 0; text-align: left; } .hovereffect .overlay:before { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; border: 1px solid #fff; content: ''; opacity: 0; filter: alpha(opacity=0); -o-transition: opacity 0.35s, -webkit-transform 0.45s; -ms-transition: opacity 0.35s, -webkit-transform 0.45s; -moz-transition: opacity 0.35s, -webkit-transform 0.45s; -webkit-transition: opacity 0.35s, -webkit-transform 0.45s; transition: opacity 0.35s, transform 0.45s; -o-transform: translate3d(-20px,0,0); -ms-transform: translate3d(-20px,0,0); -moz-transform: translate3d(-20px,0,0); -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0); } .hovereffect a, .hovereffect p { color: #fff; font-size: 15px; opacity: 0; filter: alpha(opacity=0); -o-transition: opacity 0.35s, -webkit-transform 0.45s; -ms-transition: opacity 0.35s, -webkit-transform 0.45s; -moz-transition: opacity 0.35s, -webkit-transform 0.45s; -webkit-transition: opacity 0.35s, -webkit-transform 0.45s; transition: opacity 0.35s, transform 0.45s; -o-transform: translate3d(-10px,0,0); -ms-transform: translate3d(-10px,0,0); -moz-transform: translate3d(-10px,0,0); -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); width: 100%; } .hovereffect a{ font-weight: 600; margin-right: 10px; } .hovereffect:hover img, .hovereffect:focus img{ opacity: 0.4; filter: alpha(opacity=40); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .hovereffect:hover .overlay:before, .hovereffect:hover a, .hovereffect:hover p, .hovereffect:focus .overlay:before, .hovereffect:focus a, .hovereffect:focus p{ opacity: 1; filter: alpha(opacity=100); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } @media (max-width:1200px){ .hovereffect { cursor: pointer; } }
$( ".hovereffect" ).click(function() { $( this ).toggleClass( ".hovereffect .overlay" ); });

Related: See More


Questions / Comments: