<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;
}
