<div class="items-container">
<div class="item">
<div class="diamond-container">
<div class="diamond">
<div class="diamond-wrapper">
<div class="diamond-content">$800</div>
</div>
</div>
</div>
<div class="item-wrapper">
<div class="content-wrapper">
<div class="img-container">
<div class="bg-square"></div>
<img class="item-img" src="http://katehummer.com/resources/speaker-alpha.png" />
</div>
<div class="content-text">
<div class="item-name">15" 2-Way Speaker</div>
<div class="item-subtext-container">
<span class="item-subtext subtext-mfr">Mackie</span> |
<span class="item-subtext subtext-model"> #SA1512</span>
</div>
</div>
</div>
<div class="view-more-btn">View More <span class="view-symbol">+</span></div>
<div class="item-details-container">
<div class="details-content-wrapper">
<div class="detail">
<span class="detail-title">Item | </span>
<span class="detail-text detail-name">15" 2-Way Speaker</span>
</div>
<div class="detail">
<span class="detail-title">MFR | </span>
<span class="detail-text mfr-name">Mackie</span>
</div>
<div class="detail">
<span class="detail-title">Model # | </span>
<span class="detail-text detail-model">SA1512</span>
</div>
<div class="detail">
<span class="detail-title">MSRP | </span>
<span class="detail-text detail-msrp">$1200</span>
</div>
<div class="detail">
<span class="detail-title">Price | </span>
<span class="detail-text detail-price">$800</span>
</div>
<div class="detail detail-desc">
<div class="detail-title">Description</div>
<div class="detail-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora praesentium quos, accusantium, rem architecto veritatis possimus. Quis facilis, quo reiciendis laudantium.</div>
<a href="https://www.ccisolutions.com/StoreFront/jsp/pdf/MAC-SA1521.PDF" target="_blank">
<div class="detail-manual-link">
<div class="manual-icon-container">
<svg class="manual-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 465 465" style="enable-background:new 0 0 465 465;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M240,356.071V132.12c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v223.951c0,4.143,3.357,7.5,7.5,7.5 S240,360.214,240,356.071z" fill="#f1f1f1"/>
<path d="M457.5,75.782c-15.856,0-35.614-6.842-56.533-14.085c-26.492-9.174-56.521-19.571-87.663-19.571 c-36.035,0-58.019,15.791-70.115,29.038c-4.524,4.956-8.03,9.922-10.688,14.327c-2.658-4.405-6.164-9.371-10.688-14.327 c-12.097-13.247-34.08-29.038-70.115-29.038c-31.143,0-61.171,10.397-87.663,19.571C43.114,68.94,23.356,75.782,7.5,75.782 c-4.143,0-7.5,3.357-7.5,7.5v302.092c0,4.143,3.357,7.5,7.5,7.5c18.38,0,39.297-7.243,61.441-14.911 c25.375-8.786,54.136-18.745,82.755-18.745c24.54,0,44.403,8.126,59.038,24.152c2.792,3.058,7.537,3.273,10.596,0.48 s3.273-7.537,0.48-10.596c-12.097-13.246-34.08-29.037-70.114-29.037c-31.143,0-61.171,10.397-87.663,19.571 C46.298,369.931,29.396,375.782,15,377.422V90.41c16.491-1.571,34.755-7.896,53.941-14.539 c25.375-8.786,54.136-18.745,82.755-18.745c57.881,0,73.025,45.962,73.634,47.894c0.968,3.148,3.876,5.298,7.17,5.298 s6.202-2.149,7.17-5.298c0.146-0.479,15.383-47.894,73.634-47.894c28.619,0,57.38,9.959,82.755,18.745 c19.187,6.644,37.45,12.968,53.941,14.539v287.012c-14.396-1.64-31.298-7.491-49.033-13.633 c-26.492-9.174-56.521-19.571-87.663-19.571c-36.036,0-58.02,15.791-70.115,29.038c-2.793,3.06-2.578,7.803,0.48,10.596 c3.06,2.793,7.804,2.578,10.596-0.48c14.635-16.027,34.498-24.153,59.039-24.153c28.619,0,57.38,9.959,82.755,18.745 c22.145,7.668,43.062,14.911,61.441,14.911c4.143,0,7.5-3.357,7.5-7.5V83.282C465,79.14,461.643,75.782,457.5,75.782z" fill="#f1f1f1"/>
<path d="M457.5,407.874c-15.856,0-35.614-6.842-56.533-14.085c-26.492-9.174-56.521-19.571-87.663-19.571 c-33.843,0-55.291,13.928-67.796,26.596l-26.017-0.001c-12.505-12.668-33.954-26.595-67.795-26.595 c-31.143,0-61.171,10.397-87.663,19.571c-20.919,7.243-40.677,14.085-56.533,14.085c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5 c18.38,0,39.297-7.243,61.441-14.911c25.375-8.786,54.136-18.745,82.755-18.745c24.54,0,44.403,8.126,59.038,24.152 c1.421,1.556,3.431,2.442,5.538,2.442l32.454,0.001c2.107,0,4.117-0.887,5.538-2.442c14.635-16.027,34.498-24.153,59.039-24.153 c28.619,0,57.38,9.959,82.755,18.745c22.145,7.668,43.062,14.911,61.441,14.911c4.143,0,7.5-3.357,7.5-7.5 S461.643,407.874,457.5,407.874z" fill="#f1f1f1"/>
</g>
</svg>
</div>
<div class="manual-link-text">View Manual</div>
</div>
</a>
</div>
<div class="delivery-container">
<input type="radio" name="delivery-radio" class="delivery-radio" value="pickup" checked/>
<div class="delivery-radio-text">Pickup</div>
<input type="radio" name="delivery-radio" class="delivery-radio" value="delivery" title="delivery" />
<div class="delivery-radio-text">Delivery</div>
</div>
<div class="detail-gallery">
<a class="thumb-link" href="#"><img class="detail-thumb" src="http://katehummer.com/resources/speaker-thumb-01.jpg" alt="Item Preview" /></a>
<a class="thumb-link" id="more-thumbs" href="#">
<div class="thumb-overlay">+</div>
<img class="detail-thumb" src="http://katehummer.com/resources/speaker-thumb-02.jpg" alt="Item Preview" />
</a>
</div>
<div class="detail-price-container">
<div class="price-subtext">Est. Price</div>
<div class="price-text">$800</div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="item">
<div class="diamond-container">
<div class="diamond">
<div class="diamond-wrapper">
<div class="diamond-content">$800</div>
</div>
</div>
</div>
<div class="item-wrapper">
<div class="content-wrapper">
<div class="img-container">
<div class="bg-square"></div>
<img class="item-img" src="http://katehummer.com/resources/speaker-alpha.png" />
</div>
<div class="content-text">
<div class="item-name">15" 2-Way Speaker</div>
<div class="item-subtext-container">
<span class="item-subtext subtext-mfr">Mackie</span> |
<span class="item-subtext subtext-model"> #SA1512</span>
</div>
</div>
</div>
<div class="view-more-btn">View More <span class="view-symbol">+</span></div>
<div class="item-details-container">
<div class="details-content-wrapper">
<div class="detail">
<span class="detail-title">Item | </span>
<span class="detail-text detail-name">15" 2-Way Speaker</span>
</div>
<div class="detail">
<span class="detail-title">MFR | </span>
<span class="detail-text mfr-name">Mackie</span>
</div>
<div class="detail">
<span class="detail-title">Model # | </span>
<span class="detail-text detail-model">SA1512</span>
</div>
<div class="detail">
<span class="detail-title">MSRP | </span>
<span class="detail-text detail-msrp">$1200</span>
</div>
<div class="detail">
<span class="detail-title">Price | </span>
<span class="detail-text detail-price">$800</span>
</div>
<div class="detail detail-desc">
<div class="detail-title">Description</div>
<div class="detail-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora praesentium quos, accusantium, rem architecto veritatis possimus. Quis facilis, quo reiciendis laudantium.</div>
<a href="https://www.ccisolutions.com/StoreFront/jsp/pdf/MAC-SA1521.PDF" target="_blank">
<div class="detail-manual-link">
<div class="manual-icon-container">
<svg class="manual-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 465 465" style="enable-background:new 0 0 465 465;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M240,356.071V132.12c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v223.951c0,4.143,3.357,7.5,7.5,7.5 S240,360.214,240,356.071z" fill="#f1f1f1"/>
<path d="M457.5,75.782c-15.856,0-35.614-6.842-56.533-14.085c-26.492-9.174-56.521-19.571-87.663-19.571 c-36.035,0-58.019,15.791-70.115,29.038c-4.524,4.956-8.03,9.922-10.688,14.327c-2.658-4.405-6.164-9.371-10.688-14.327 c-12.097-13.247-34.08-29.038-70.115-29.038c-31.143,0-61.171,10.397-87.663,19.571C43.114,68.94,23.356,75.782,7.5,75.782 c-4.143,0-7.5,3.357-7.5,7.5v302.092c0,4.143,3.357,7.5,7.5,7.5c18.38,0,39.297-7.243,61.441-14.911 c25.375-8.786,54.136-18.745,82.755-18.745c24.54,0,44.403,8.126,59.038,24.152c2.792,3.058,7.537,3.273,10.596,0.48 s3.273-7.537,0.48-10.596c-12.097-13.246-34.08-29.037-70.114-29.037c-31.143,0-61.171,10.397-87.663,19.571 C46.298,369.931,29.396,375.782,15,377.422V90.41c16.491-1.571,34.755-7.896,53.941-14.539 c25.375-8.786,54.136-18.745,82.755-18.745c57.881,0,73.025,45.962,73.634,47.894c0.968,3.148,3.876,5.298,7.17,5.298 s6.202-2.149,7.17-5.298c0.146-0.479,15.383-47.894,73.634-47.894c28.619,0,57.38,9.959,82.755,18.745 c19.187,6.644,37.45,12.968,53.941,14.539v287.012c-14.396-1.64-31.298-7.491-49.033-13.633 c-26.492-9.174-56.521-19.571-87.663-19.571c-36.036,0-58.02,15.791-70.115,29.038c-2.793,3.06-2.578,7.803,0.48,10.596 c3.06,2.793,7.804,2.578,10.596-0.48c14.635-16.027,34.498-24.153,59.039-24.153c28.619,0,57.38,9.959,82.755,18.745 c22.145,7.668,43.062,14.911,61.441,14.911c4.143,0,7.5-3.357,7.5-7.5V83.282C465,79.14,461.643,75.782,457.5,75.782z" fill="#f1f1f1"/>
<path d="M457.5,407.874c-15.856,0-35.614-6.842-56.533-14.085c-26.492-9.174-56.521-19.571-87.663-19.571 c-33.843,0-55.291,13.928-67.796,26.596l-26.017-0.001c-12.505-12.668-33.954-26.595-67.795-26.595 c-31.143,0-61.171,10.397-87.663,19.571c-20.919,7.243-40.677,14.085-56.533,14.085c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5 c18.38,0,39.297-7.243,61.441-14.911c25.375-8.786,54.136-18.745,82.755-18.745c24.54,0,44.403,8.126,59.038,24.152 c1.421,1.556,3.431,2.442,5.538,2.442l32.454,0.001c2.107,0,4.117-0.887,5.538-2.442c14.635-16.027,34.498-24.153,59.039-24.153 c28.619,0,57.38,9.959,82.755,18.745c22.145,7.668,43.062,14.911,61.441,14.911c4.143,0,7.5-3.357,7.5-7.5 S461.643,407.874,457.5,407.874z" fill="#f1f1f1"/>
</g>
</svg>
</div>
<div class="manual-link-text">View Manual</div>
</div>
</a>
</div>
<div class="delivery-container">
<input type="radio" name="delivery-radio" class="delivery-radio" value="pickup" checked/>
<div class="delivery-radio-text">Pickup</div>
<input type="radio" name="delivery-radio" class="delivery-radio" value="delivery" title="delivery" />
<div class="delivery-radio-text">Delivery</div>
</div>
<div class="detail-gallery">
<a class="thumb-link" href="#"><img class="detail-thumb" src="http://katehummer.com/resources/speaker-thumb-01.jpg" alt="Item Preview" /></a>
<a class="thumb-link" id="more-thumbs" href="#">
<div class="thumb-overlay">+</div>
<img class="detail-thumb" src="http://katehummer.com/resources/speaker-thumb-02.jpg" alt="Item Preview" />
</a>
</div>
<div class="detail-price-container">
<div class="price-subtext">Est. Price</div>
<div class="price-text">$800</div>
</div>
</div>
</div>
</div>
</div>-->
</div>html, body {
width: 100vw;
overflow-x: hidden !important;
background: transparent;
z-index: 0;
font-family: 'brandon-grotesque', sans-serif;
text-rendering: optimizeLegibility;
font-smoothing: antialiased;
osx-font-smoothing: grayscale;
color: #333;
}
* {
text-decoration: none !important;
color: inherit;
}
.items-container {
width: 95vw;
overflow-x: hidden;
margin: 0 auto;
margin-top: 20px;
}
.item {
display: inline-block;
position: relative;
margin-top: 25px;
margin-bottom: 10px;
margin-left: 40px;
margin-right: 20px;
width: 300px;
height: 425px;
border-radius: 3px;
box-shadow: 3px 4px 12px 1px rgba(0,0,0,0.3);
}
.item-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.diamond-container {
position: absolute;
margin-top: -20px;
margin-left: -20px;
transition: all 0.3s ease-out;
}
.diamond {
margin-left: 10px;
margin-top: 10px;
width: 60px;
height: 60px;
background: #555;
overflow: hidden;
color: #fff;
font-weight: 500;
font-size: 1.25em;
letter-spacing: -0.5px;
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
.diamond-wrapper {
margin-top: 50%;
transform: translateY(-50%);
text-align: center;
}
.diamond-content {
transform: rotate(-45deg);
}
.content-wrapper {
width: 95%;
margin: 0 auto;
margin-top: 20px;
transition: all 0.3s ease-out;
}
.img-container {
position: relative;
width: 100%;
min-height: 200px;
margin-top: 80px;
}
.bg-square {
position: absolute;
width: 135px;
height: 130px;
border: 12px solid rgba(51,51,51,0.1);
margin: 0 auto;
left: 0;
right: 0;
}
.item-img {
position: absolute;
display: block;
width: 200px;
height: auto;
margin: 0 auto;
margin-top: -20px;
left: 0;
right: 0;
}
.content-text {
position: relative;
width: 100%;
margin-top: 20px;
}
.item-name {
font-weight: 400;
font-size: 1.35em;
text-transform: uppercase;
text-align: center;
}
.item-subtext-container {
width: 70%;
margin: 0 auto;
margin-top: 10px;
font-size: 0.8em;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #bbb;
text-align: center;
}
.view-more-btn {
position: absolute;
bottom: 0;
width: 100%;
height: 35px;
background: #333;
color: #fff;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 3px;
word-spacing: 3px;
text-align: center;
padding-top: 20px;
user-select: none !important;
cursor: pointer;
z-index: 100;
transition: all 0.3s ease-out;
}
.item-details-container {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
background: rgba(0,0,0,0.65);
z-index: 99;
color: #f1f1f1;
transition: all 0.3s ease-out;
}
.details-content-wrapper {
position: relative;
width: 85%;
margin: 0 auto;
margin-top: 70px;
}
.detail {
margin-top: 5px;
}
.detail-desc {
margin-top: 9px;
}
.detail-title {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.8em;
}
.detail-text {
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0;
font-size: 0.85em;
}
.detail-description {
width: 95%;
padding-left: 2.5%;
padding-top: 2px;
font-size: 0.9em;
font-weight: 300;
line-height: 1.2em;
}
.detail-manual-link {
margin-top: 8px;
padding-left: 2.5%;
font-weight: 400;
font-size: 0.7em;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
user-select: none !important;
}
.manual-icon-container {
display: inline-block;
margin-right: 5px;
}
.manual-svg {
width: 15px;
height: auto;
}
.manual-link-text {
position: absolute;
display: inline-block;
padding-top: 2px;
padding-left: 3px;
}
.delivery-container {
margin-top: 15px;
}
.delivery-radio {
position: absolute;
transform: scale(0.75);
margin-top: -3px;
}
.delivery-radio-text {
display: inline-block;
font-weight: 300;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
}
.delivery-radio-text:first-child {
margin-right: 10px;
}
.detail-gallery {
position: relative;
display: inline-block;
width: 130px;
overflow: hidden;
}
.thumb-link {
display: inline-block;
width: 50px;
height: 50px;
overflow: hidden;
margin-right: 5px;
margin-bottom: 5px;
box-shadow: 2px 4px 12px rgba(0,0,0,0.35);
}
.thumb-overlay {
position: absolute;
width: 50px;
height: 40px;
padding-top: 10px;
background: rgba(51,51,51,0.65);
color: #fff;
font-size: 2em;
font-weight: 500;
text-align: center;
text-shadow: 1px 2px 3px rgba(0,0,0,0.5);
}
.detail-thumb {
width: 50px;
height: auto;
}
.detail-price-container {
display: inline-block;
position: relative;
float: right;
width: calc(100% - 175px);
text-align: right;
padding-right: 20px;
padding-top: 2px;
}
.price-subtext {
font-weight: 300;
font-size: 0.65em;
text-transform: uppercase;
letter-spacing: 2px;
}
.price-text {
font-weight: 500;
font-size: 2em;
letter-spacing: -0.5px;
padding-top: 5px;
}
/*START ITEM ACTIVE STYLES*/
.item.active > .diamond-container {
margin-top: 0;
margin-left: 0;
transition: 0.3s ease-out;
}
.item.active > .diamond-container > .diamond {
transform: rotate(0deg);
margin-top: 0;
margin-left: 0;
height: 0;
transition: 0.3s ease-out;
}
.item.active > .item-wrapper > .content-wrapper {
filter: blur(5px);
filter: blur(5px);
transition: 0.3s ease-out;
}
.item.active > .item-wrapper > .view-more-btn {
bottom: calc(100% - 55px);
transition: 0.3s ease-out;
}
.item.active > .item-wrapper > .item-details-container {
height: 100%;
transition: all 0.3s ease-out;
}
/*START CUSTOM CHECKBOX STYLES*/
input[type="radio"] {
appearance: none;
appearance: none;
appearance: none;
background-color: transparent;
border: 1px solid #fff;
border-radius: 26px;
box-shadow: inset 0 0 0 0 #fff;
cursor: pointer;
height: 24px;
position: relative;
width: 41px;
vertical-align: top;
margin-bottom: 20px;
outline: none !important;
transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
}
input[type="radio"]:after {
background-color: #fff;
border: 1px solid #fff;
border-radius: 24px;
box-shadow: inset 0 -3px 3px rgba(255, 255, 255, 0.025), 0 1px 4px rgba(255, 255, 255, 0.15), 0 4px 4px rgba(255, 255, 255, 0.25);
content: '';
display: block;
height: 21px;
left: 0;
position: absolute;
right: 16px;
top: 0;
margin-bottom: 19px;
outline: none;
transition: border .25s .15s, left .25s .1s, right .15s .175s;
}
input[type="radio"]:checked {
border-color: rgba(255,255,255,0.75);
box-shadow: inset 0 0 0 13px rgba(250,250,250,0.35);
padding-left: 18px;
outline: none;
transition: border .25s, box-shadow .25s, padding .25s .15s;
}
input[type="radio"]:checked:after {
border-color: rgba(255,255,255,0.75);
left: 16px;
right: 0;
outline: none;
transition: border .25s, left .15s .25s, right .25s .175s;
}
/*END CUSTOM CHECKBOX STYLES*/$('.view-more-btn').on('click', function() {
var thisParentInit = $(this).parent('.item-wrapper');
var thisParent = thisParentInit.parent('.item');
var thisSymbol = $(this).find('.view-symbol');
if (thisParent.hasClass('active') == false) {
thisParent.addClass('active');
$(this).text('VIEW LESS -');
} else if (thisParent.hasClass('active') == true) {
thisParent.removeClass('active');
$(this).text('VIEW MORE +');
}
});
$('.delivery-radio-text').on('click', function() {
var thisParent = $(this).parent('.delivery-container');
var theseRadios = thisParent.find('.delivery-radio');
theseRadios.prop('checked', false);
var thisRadio = $(this).prev('.delivery-radio');
if (thisRadio.prop('checked') == false) {
//thisRadio.prop('checked', true);
thisRadio.trigger('click');
thisRadio.trigger('change');
} else if (thisRadio.prop('checked') == true) {
//thisRadio.prop('checked', false);
thisRadio.trigger('click');
thisRadio.trigger('change');
}
});
$('.thumb-link').on('click', function(e) {
e.preventDefault();
});
$('.delivery-radio').on('change', function() {
var thisParentA = $(this).parent('.delivery-container');
var thisParentB = thisParentA.parent('.details-content-wrapper');
var thisParentC = thisParentB.parent('.item-details-container');
var thisParentD = thisParentC.parent('.item-wrapper');
var thisParentE = thisParentD.parent('.item');
var thisDiamondContent = thisParentE.find('.diamond-content');
var priceInitA = thisDiamondContent.text();
var priceSplit = priceInitA.split('$');
var priceInit = parseInt(priceSplit[1]);
var deliveryFee = 50;
var priceEst = parseInt(priceInit + deliveryFee);
var priceOutput = '$'+priceEst;
console.log(priceEst);
var deliveryRadio = thisParentA.find('.delivery-radio[title="delivery"]');
if (deliveryRadio.prop('checked') == false) {
$('.price-text').text(priceInitA);
} else if (deliveryRadio.prop('checked') == true) {
$('.price-text').text(priceOutput);
}
});
External CSS
This Pen doesn't use any external CSS resources.