Тестовый участок: http://i8p.64d.myftpupload.com/product-category/paint-sprayers/high-riders/
Получите обрез при наведении на соты, когда == близко к краю экрана.
Drop-тень | Внутри элемента .honeycomb-cell:
filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
Код наведения модели Honeycomb:
#honeycomb-models:hover {
opacity: 1;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
Тень при наведении:
.honeycomb-cell:hover {
filter: drop-shadow(-1px 12px 3px rgba(50, 50, 0, 0.5));
}
html {
scroll-behavior: smooth;
}
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
body {
font-family: 'Montserrat', sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
/* HONEYCOMB --------------------------------------------------------------------------------------------------------------------------- */
.honeycomb {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
list-style: none;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
max-width: 1200px;
margin-top: -50px !important;
margin-bottom: -75px !important;
margin: 0 auto;
padding: 0;
-webkit-transform: translateY(34.375px);
transform: translateY(34.375px);
/* 3D Look --------------------------------------------------------------------------- */
-webkit-transform: rotateX(45deg) rotateY(0deg);
transform: rotateX(45deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center 65%;
transform-origin: center 65%;
}
/* HONEYCOMB CELL --------------------------------------------------------------------------------------------------------------------------- */
.honeycomb-cell {
-webkit-box-flex: 0;
flex: 0 1 187.5px;
max-width: 187.5px;
height: 103.1px;
margin: 49.10714285715px 9.375px 18.75px;
position: relative;
padding: 0.5em;
text-align: center;
z-index: 1;
/* Shadow | CAUSING PROBLEMS WITH WHITE LINE THAT CUTS OFF HONEYCOMBS ------------------------------------------------- */
filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}
/* HONEYCOMB CELL BEFORE & AFTER | Displays Border & Background Overlay --------------------------------------------------- */
.honeycomb-cell::before, .honeycomb-cell::after {
content: '';
}
/* HONEYCOMB CELL BEFORE | Creates Border -------------------------------------------------------------- */
.honeycomb-cell::before {
background: white;
-webkit-transform: scale(1.055);
transform: scale(1.055);
}
/* HONEYCOMB CELL AFTER | Background Overlay ------------------------------------------------------------------ */
.honeycomb-cell::after {
background: #6ec1e4;
opacity: 0.5;
-webkit-transition: opacity 350ms;
transition: opacity 350ms;
}
/* HONEYCOMB TITLE --------------------------------------------------------------------------------------------------------------------------- */
.honeycomb-cell__title {
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-break: break-word;
text-transform: uppercase;
color: #fff;
font-weight: 700;
font-size: 1.3em;
-webkit-transition: opacity 350ms;
transition: opacity 350ms;
}
/* HONEYCOMB TITLE | Small --------------------------------------------------------------------------- */
.honeycomb-cell__title > small {
font-weight: 300;
margin-top: 0.25em;
}
/* HONEYCOMB IMAGE --------------------------------------------------------------------------------------------------------------------------- */
.honeycomb-cell__image {
min-width: 188px;
min-height: 206px;
max-width: 188px;
max-height: 206px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
/* HONEYCOMB CELL BEFORE, AFTER & HONEYCOMB IMAGE | Shape of Honeycombs ------------------------------------------------------------------------------------------------ */
.honeycomb-cell::before, .honeycomb-cell::after, .honeycomb-cell__image {
top: -50%;
left: 0;
width: 100%;
height: 200%;
display: block;
position: absolute;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
z-index: -1;
}
/* HONEYCOMB IMAGE | For Postioning Honeycombs --------------------------------------------------------------------------------------------------------------------------- */
.honeycomb__placeholder {
display: none;
opacity: 0;
width: 250px;
margin: 0 12.5px;
}
/* HOVERS --------------------------------------------------------------------------------------------------------------------------- */
/* HOVER | Models ---------------------------------------------------- */
#honeycomb-models:hover {
opacity: 1;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
/* HOVER | Model Parts ---------------------------------------------------- */
#honeycomb-model-parts:hover {
opacity: 1;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
/* HOVER | Packing Kits ---------------------------------------------------- */
#honeycomb-packing-kit:hover {
opacity: 1;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
/* HOVER | Trans ---------------------------------------------------- */
#honeycomb-trans:hover {
opacity: 1;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
/* HOVER | PV's ---------------------------------------------------- */
#honeycomb-pv:hover {
opacity: 1;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
/* HOVER | Bedfords ---------------------------------------------------- */
#honeycomb-bedford:hover {
opacity: 1;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
/* HOVER | Manuals ---------------------------------------------------- */
#honeycomb-manual:hover {
opacity: 1;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
/* HOVER | Shadow | CAUSING PROBLEMS WITH WHITE LINE THAT CUTS OFF HONEYCOMBS ---------------------------------------------------- */
.honeycomb-cell:hover {
filter: drop-shadow(-1px 12px 3px rgba(50, 50, 0, 0.5));
}
/* HOVER | Honeycomb Title | Hides Title ---------------------------------------------------- */
.honeycomb-cell:hover .honeycomb-cell__title {
opacity: 0;
}
/* HOVER | Honeycomb Border ---------------------------------------------------- */
.honeycomb-cell:hover::before {
background: #72f88e;
}
/* HOVER | Honeycomb Cell | Removes Background Color ---------------------------------------------------- */
.honeycomb-cell:hover::after {
opacity: 0;
}
/* MEDIA QUERIES | Height and Width ------------------------------------------------------------------------------------------------- */
@media (min-width: 825px) and (max-width: 1100px) {
.honeycomb {
margin-top: -85px !important;
margin-bottom: -110px !important;
}
}
@media (min-width: 550px) and (max-width: 825px) {
.honeycomb {
margin-top: -150px !important;
margin-bottom: -150px !important;
}
}
@media (min-width: 530px) and (max-width: 549px) {
.honeycomb {
margin-top: -170px !important;
margin-bottom: -200px !important;
}
}
@media (min-width: 376px) and (max-width: 529px) {
.honeycomb {
margin-top: -280px !important;
margin-bottom: -250px !important;
}
}
@media (max-width: 375px) {
.honeycomb {
margin-top: -220px !important;
margin-bottom: -200px !important;
}
}
/* MEDIA QUERIES | Position and Gap Between Honeycombs ------------------------------------------------------------------------------------------------- */
@media (max-width: 365px) {
.A {
margin-bottom: 25px !important;
margin-left: calc(40% - 200px) !important;
}
.B {
margin-bottom: 25px !important;
margin-right: calc(40% - 150px) !important;
margin-left: calc(-38% + 148px) !important;
}
}
@media (max-width: 375px) {
.A {
margin-bottom: 25px !important;
margin-left: calc(40% - 200px) !important;
}
.B {
margin-bottom: 25px !important;
margin-right: calc(40% - 160px) !important;
margin-left: calc(-38% + 148px) !important;
}
}
@media (min-width: 376px) and (max-width: 549px) {
.honeycomb-cell {
margin: 60px 18.75px;
}
}
@media (min-width: 550px) and (max-width: 825px) {
.honeycomb-cell:nth-child(3n) {
margin-right: calc(50% - 125px);
margin-left: calc(50% - 125px);
}
.honeycomb__placeholder:nth-child(3n + 5) {
display: block;
}
}
@media (min-width: 825px) and (max-width: 1100px) {
.honeycomb-cell:nth-child(5n + 4) {
margin-left: calc(50% - 275px);
}
.honeycomb-cell:nth-child(5n + 5) {
margin-right: calc(50% - 275px);
}
.honeycomb__placeholder:nth-child(5n), .honeycomb__placeholder:nth-child(5n + 3) {
display: block;
}
}
@media (min-width: 1100px) {
.honeycomb-cell:nth-child(5n + 5) {
margin-left: calc(50% - 400px);
}
.honeycomb-cell:nth-child(7n + 7), .honeycomb-cell:nth-child(7n + 5):nth-last-child(2) {
margin-right: calc(50% - 400px);
}
.honeycomb__placeholder:nth-child(7n + 7), .honeycomb__placeholder:nth-child(7n + 9), .honeycomb__placeholder:nth-child(7n + 11) {
display: block;
}
}
/* TAB CONTENT --------------------------------------------------------------------------------------------------------------------------- */
.tabcontent {
display: none;
padding: 6px 12px;
margin-top: 25px;
/*border-radius: 4px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);*/
}
/* TAB CONTENT | Back To Top Link --------------------------------------------------------------------------------------------------------- */
.BTT-Link {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
padding-top: 5px;
}
