hello,
I’m trying to figure out why my product titles aren’t centering on hover. They’re centered text wise, but not centered to the product image.
https://affinitybands.com/collections/custom-collection
Code i’ve used to create the hover effect.
/*** Collection title Hover ***/
@media (min-width: 1200px) {
.block-inner-inner {
position: relative;
}
.block-inner-inner:before {
content: ‘’;
position: absolute;
height: 100%;
width: 100%;
background: #fff;
z-index: 1;
opacity: .5;
left: 0;
opacity: 0;
transition: all 0.3s;
pointer-events: none;
}
.block-inner-inner .product-info {
position: absolute;
top: 50%;
transform: translatey(-50%);
opacity: 0;
transition: all 0.3s;
z-index: 2;
text-align: center;
padding: 0 10px;
pointer-events: none;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
}
.block-inner-inner .product-info .product-link {
text-align: center;
}
.block-inner-inner .product-info .product-price {
justify-content: center;
}
.block-inner-inner:hover:before {
opacity: 0.75;
}
.block-inner-inner:hover .product-info {
opacity: 1;
}
}