/* Wrapper / box med radius og clipping */
.item-box.with-image .item-box-image-box,
.category-box.with_image .category-box-image-box > div:nth-of-type(1),
.hub-card .hub-image-link {
overflow: hidden;
border-radius: 10%;
position: relative;
display: block;
}
/* Alle billeder og baggrunde arver radius og transform */
.item-box.with-image .item-box-image-box img,
.item-box.with-image .item-box-background-image,
.category-box.with_image .category-box-image-box img,
.category-box.with_image .category-box-image-box > div:nth-of-type(1) > div,
.hub-card .hub-image-link img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit; /* altid arver wrapperens radius */
transition: transform 0.6s cubic-bezier(0.25,0.1,0.25,1);
will-change: transform;
}
/* Hover: zoom uden at skifte element */
.item-box.with-image .item-box-image-box:hover img,
.item-box.with-image .item-box-background-image:hover,
.category-box.with_image .category-box-image-box:hover img,
.category-box.with_image .category-box-image-box:hover > div,
.hub-card .hub-image-link:hover img {
transform: scale(1.1);
}
/* Skygge */
.item-box.with-image .item-box-image-box:hover,
.item-box.with-image .item-box-image-box:focus,
.category-box.with_image .category-box-image-box:hover,
.category-box.with_image .category-box-image-box:focus,
.hub-card .hub-image-link:hover,
.hub-card .hub-image-link:focus {
box-shadow: 0 10px 25px rgba(0,0,0,0.35),
0 6px 12px rgba(0,0,0,0.2);
}
/* Mobil: let zoom hele tiden */
@media (hover: none) {
.item-box.with-image .item-box-image-box img,
.item-box-with-image .item-box-background-image,
.category-box.with_image .category-box-image-box img,
.category-box.with_image .category-box-image-box > div:nth-of-type(1) > div,
.hub-card .hub-image-link img {
transform: scale(1.03);
transition-duration: 0.35s;
}
}