"card shop"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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='background image'></div> <div class='background overlay'> <div class='section'> <div class='photos inline'> <img class='main-photo active' id='lg-1' src='https://trakke.co.uk/wp-content/uploads/2015/11/LAYOUT_0005_Layer-68.png'> <img class='main-photo' id='lg-2' src='https://trakke.co.uk/wp-content/uploads/2015/11/LAYOUT_0009_Layer-63.png'> <img class='main-photo' id='lg-3' src='https://trakke.co.uk/wp-content/uploads/2015/11/LAYOUT_0006_Layer-67.png'> <div class='small-photos'> <div class='sub'> <img class='sub-photo' id='sm-1' src='https://trakke.co.uk/wp-content/uploads/2015/11/LAYOUT_0005_Layer-68.png'> </div> <div class='sub'> <img class='sub-photo' id='sm-2' src='https://trakke.co.uk/wp-content/uploads/2015/11/LAYOUT_0009_Layer-63.png'> </div> <div class='sub'> <img class='sub-photo' id='sm-3' src='https://trakke.co.uk/wp-content/uploads/2015/11/LAYOUT_0006_Layer-67.png'> </div> </div> </div><div class='content inline'> <div class='header'><span class='name'>Óg</span><span class='price'>£160</span></div> <div class='body'><span class='category'>Backpack</span><span class='material'>Ventile Cotton</span><span class='body-header'>Designer's Notes</span>The Óg is the everyday explorers backpack. Constructed from Ventile cotton with a durable waxed cotton base, the lightweight Óg is adapted for adventure in even the harshest conditions. One large compartment stows all your expedition kit and a roll-top closure ensures your gear stays in and the weather stays out. A near-seamless design minimises snag risk and leaks, leaving you to focus on the task at hand. </div> <div class='footer'> <a href='https://trakke.co.uk/shop/og-2/' target='_blank'>Add to Cart</a> </div> </div></div> </div> <script> var photos = document.querySelectorAll(".sub-photo"); var mainPhotos = document.querySelectorAll(".main-photo"); var activePhoto = ""; [].forEach.call(mainPhotos, function(photo) { if (photo.className.indexOf("active")>-1) { activePhoto = photo; } }); [].forEach.call(photos, function(photo) { photo.addEventListener("mouseover", function() { var clicked=photo.id; clicked = "lg-" + clicked.split("-")[1]; activePhoto.classList.remove("active"); activePhoto = document.getElementById(clicked); activePhoto.classList.add("active"); }); }); </script>
* { transition: 0.4s ease all; box-sizing: border-box; font-family: "Avenir"; } .background { position: fixed; top: -10px; right: -10px; left: -10px; bottom: -10px; background-size: cover; overflow: scroll; } .background.image { filter: blur(5px) grayscale(100%); -webkit-filter: blur(5px) grayscale(100%); background: url("https://trakke.co.uk/wp-content/uploads/2014/12/IMG_0504.jpg") center center no-repeat; background-size: cover; } .background.overlay { background: linear-gradient(45deg, rgba(255, 245, 18, 0.2), rgba(103, 97, 68, 0.8)); } .section { z-index: 1; background-color: white; width: 600px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); margin: 100px auto; position: relative; } .section img.main-photo { width: 300px; opacity: 0; visibility: hidden; position: absolute; top: 0; } .section img.main-photo.active { opacity: 1; visibility: visible; } .section .sub img { opacity: 0.5; width: 100px; } .section .sub img:hover { opacity: 1; } .section .inline { display: inline-block; vertical-align: top; } .section .photos { width: 300px; } .section .photos .small-photos { margin-top: 300px; display: flex; margin-bottom: 10px; } .section .content { background: linear-gradient(to bottom, #f5f5f5, #fff); width: 300px; } .section .content .header { padding: 20px; display: block; background-color: #333; border-left: 5px solid #ff6700; margin-top: -20px; margin-right: -20px; margin-left: -60px; padding-left: 75px; padding-right: 40px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } .section .content .header .price, .section .content .header .name { font-weight: 800; color: white; text-shadow: 0px 1px 2px black; font-size: 1.2em; } .section .content .header .price { float: right; font-size: 1em; margin-top: 2px; } .section .content .body { padding: 20px; font-size: 0.8em; } .section .content .body .material, .section .content .body .category { color: #aaa; margin-bottom: 10px; display: inline-block; } .section .content .body .material { float: right; } .section .content .body .body-header { font-weight: 800; margin-bottom: 10px; display: block; border-bottom: 1px solid #ccc; padding-bottom: 5px; } .section .content .footer a { position: absolute; bottom: -20px; line-height: 60px; right: 0px; left: 300px; text-align: center; font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.9em; cursor: pointer; transition: 0.4s ease all; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); background-color: #333; color: #fff; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); text-decoration: none; } .section .content .footer a:hover { box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); bottom: -18px; text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.5); background-color: #ff6700; color: #222; }

Related: See More


Questions / Comments: