Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SASS for product preview hover card to tie together product image and match the timing for the alternate on model shot with hover
$boxshadow: 0 0 13px 0 #e0e0e0;
$hoverDelay: 600ms;
@media (min-width: $medium) {
.catalog-container {
div.product-block {
position: relative;
border: 1px solid transparent;
border-bottom: 0;
margin-top: 2em;
z-index:11;
transition: all 0s $hoverDelay linear;
.info {
z-index: 12;
height: auto !important;
background: white;
margin: -4px -4px;
}
.product-addl-info {
visibility: hidden;
opacity: 0;
left: -1px;
right: -1px;
position:absolute;
display: block !important;
height:0;
z-index: 10;
transition: visibility $hoverDelay, opacity 1s $hoverDelay linear;
box-shadow: $boxshadow;
&-details {
display: block !important;
font-size: 1.23077rem;
font-weight: 300;
letter-spacing: 0.04rem;
line-height: 1.5;
padding: 0.5em 1.5em 1.5em;
text-align: center;
background: white;
margin-top: 0;
box-shadow: $boxshadow;
}
&-FILTER_BENEFIT {
display: none;
}
&-FEATURE {
display: none;
}
&-SPEC {
display: none;
}
}
&:hover {
box-shadow: $boxshadow;
z-index:12;
.product-addl-info {
position: absolute;
height:auto;
display: block !important;
box-shadow: $boxshadow;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0s $hoverDelay linear;
z-index: 0;
}
}
}
.product-lane .button {
transform: translateY(0) !important;
margin-bottom: 2em;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.