<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 ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Cheesetoast/pen/zqaype?depth=everything&order=popularity&page=8&q=product&show_forks=false" />
<style class="cp-pen-styles">body {
padding: 50px;
}
* {
font-family: sans-serif;
box-sizing: border-box;
}
.wrapper {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
width: 944px;
margin: 0 auto;
}
.wrapper:after {
content: " ";
display: block;
clear: both;
}
#product {
padding-bottom: 75px;
}
#product .product-text {
margin-top: 35px;
width: 23.72881%;
float: left;
margin-right: 1.69492%;
}
#product .product-text:last-child {
width: 23.72881%;
float: right;
margin-right: 0;
}
#product #text-left {
text-align: right;
}
#product #text-left .prod {
padding-right: 15px;
border-right: 2px solid transparent;
}
#product #text-left .prod.active {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
border-right: 2px solid #1E4164;
}
#product #text-right .prod {
border-left: 2px solid transparent;
}
#product #text-right .prod.active {
-webkit-transform: translateX(50px);
transform: translateX(50px);
border-left: 2px solid #1E4164;
}
#product .prod {
width: 200px;
padding-left: 15px;
opacity: 0.6;
color: #1E4164;
font-size: 0.9em;
margin-bottom: 50px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#product .prod.active {
opacity: 1;
}
#product .prod h4 {
font-weight: 600;
}
#product #display {
width: 49.15254%;
float: left;
margin-right: 1.69492%;
position: relative;
height: 380px;
background: url("http://www.demandforce.com/2/images/monitor.jpg") no-repeat;
background-size: contain;
}
#product #display #display-1 {
background: url("http://www.demandforce.com/2/images/asset-21.png") no-repeat;
background-size: contain;
}
#product #display #display-2 {
background: url("http://www.demandforce.com/2/images/asset-20.png") no-repeat;
background-size: contain;
}
#product #display #display-3 {
background: url("http://www.demandforce.com/2/images/asset-25.png") no-repeat;
background-size: contain;
}
#product #display #display-4 {
background: url("http://www.demandforce.com/2/images/asset-22.png") no-repeat;
background-size: contain;
}
#product .circle:before {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
left: 0;
}
#product .circle {
color: white;
border-radius: 50%;
height: 0em;
width: 0em;
line-height: 2em;
text-align: center;
cursor: pointer;
background-position: center;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
position: absolute;
}
#product .circle:after {
content: "";
position: absolute;
}
#product .circle.active {
height: 180px;
width: 180px;
border: 5px solid rgba(204, 204, 204, 0.15);
}
#product .circle.active:after {
opacity: 0;
}
#product .active:before {
opacity: 0;
}
#product img {
width: 415px;
height: 230px;
position: absolute;
left: 18px;
top: 20px;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
#product img.active {
opacity: 1;
}
#product #display-1 {
top: 5%;
left: 5%;
}
#product #display-1.active {
top: -8%;
left: -10%;
}
#product #display-2 {
bottom: 40%;
left: 5%;
}
#product #display-2.active {
bottom: 20%;
left: -10%;
}
#product #display-3 {
top: 5%;
right: 5%;
}
#product #display-3.active {
top: -8%;
right: -5%;
}
#product #display-4 {
bottom: 40%;
right: 8%;
}
#product #display-4.active {
bottom: 20%;
right: -5%;
}
</style></head><body>
<section id="product">
<div class="wrapper">
<div id="text-left" class="product-text">
<div id="prod1" class="prod active" data-value="1" onclick="ga('send', 'event', 'Product Mini Demo', 'Click', 'Appointment Reminders');" onmouseenter="ga('send', 'event', 'Product Mini Demo', 'Hover', 'Appointment Reminders');">
<h4>Header 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum error, natus harum saepe iure maiores.</p>
</div>
<div id="prod2" class="prod" data-value="2" onclick="ga('send', 'event', 'Product Mini Demo', 'Click', 'Online Reviews');" onmouseenter="ga('send', 'event', 'Product', 'Hover', 'Online Reviews');">
<h4>Header 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit natus eos modi fugiat blanditiis illo officia, corporis.</p>
</div>
</div>
<div id="display">
<img src="http://www.demandforce.com/2/images/asset-08.jpg" alt="" data-value="1" class="active">
<img src="http://www.demandforce.com/2/images/asset-05.jpg" alt="" data-value="2">
<img src="http://www.demandforce.com/2/images/asset-03.jpg" alt="" data-value="3">
<img src="http://www.demandforce.com/2/images/asset-09.jpg" alt="" data-value="4">
<div id="display-1" class="circle active" data-value="1"></div>
<div id="display-2" class="circle" data-value="2"></div>
<div id="display-3" class="circle" data-value="3"></div>
<div id="display-4" class="circle" data-value="4"></div>
</div>
<div id="text-right" class="product-text">
<div id="prod3" class="prod" data-value="3" onclick="ga('send', 'event', 'Product Mini Demo', 'Click', 'Email Marketing');" onmouseenter="ga('send', 'event', 'Product', 'Hover', 'Email Marketing');">
<h4>Header 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ut iste voluptates magnam odit nemo molestiae. Expedita debitis.</p>
</div>
<div id="prod4" class="prod" data-value="4" onclick="ga('send', 'event', 'Product Mini Demo', 'Click', 'Email Marketing');" onmouseenter="ga('send', 'event', 'Product', 'Hover', 'Email Marketing');">
<h4>Header 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos adipisci ipsa ipsum necessitatibus.</p>
</div>
</div>
</div>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script >$(document).ready(function() {
//Variables
var product = $('section#product'),
circle = product.find('.circle');
var prod = product.find('.prod'),
prodImg = product.find('img');
circle.add(prod).on('mouseover', function(){
// remove active class from all
prod.add(circle).add(prodImg).removeClass('active');
// set active class for current
var $this = $(this),
data = $this.attr("data-value");
product.find(".circle[data-value='"+data+"']").toggleClass('active');
product.find(".prod[data-value='"+data+"']").toggleClass('active');
product.find("img[data-value='"+data+"']").toggleClass('active');
});
});
//# sourceURL=pen.js
</script>
</body></html>
