.client-grid-container {
width: 100%;
height: 100%;
}
.client-grid-wrapper {
display: grid;
}
.container-image-cg .card-body {
text-align: center;
}
.container-image-cg .rkit-card-client .image-container-cg {
position: relative;
height: 120px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
} .clientslogo-image-full-cg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s ease, opacity 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
}
img.image-cover,
img.image-cover-hover {
max-width: 100%;
min-height: 100%;
transition: all 0.5s ease;
} .hover-content-cg {
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
z-index: 3;
transition: all 0.5s ease;
padding: 0;
font-size: 16px;
}
.hover-title-cg, .hover-description-cg{
margin: 0;
padding: 0;
} .clientslogo-image-full-cg.image-hover-cg {
z-index: 2;
opacity: 0;
} .clientslogo-image-full-cg.image-default {
z-index: 1;
} .image-container-cg.horizontal .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.horizontal .hover-content-cg {
transform: translateX(100%);
}
.image-container-cg.horizontal:hover .clientslogo-image-full-cg.image-default {
transform: translateX(-100%);
opacity: 0;
}
.image-container-cg.horizontal:hover .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.horizontal:hover .hover-content-cg {
transform: translateX(0);
opacity: 1;
} .image-container-cg.vertical .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.vertical .hover-content-cg {
transform: translateY(100%);
}
.image-container-cg.vertical:hover .clientslogo-image-full-cg.image-default {
transform: translateY(-100%);
opacity: 0;
}
.image-container-cg.vertical:hover .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.vertical:hover .hover-content-cg {
transform: translateY(0);
opacity: 1;
}
.image-container-cg.fade_in .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.fade_in .hover-content-cg {
opacity: 0;
transform: scaleY(0);
transform-origin: center;
transition: all 0.5s ease;
position: absolute;
inset: 0;
z-index: 2;
}
.image-container-cg.fade_in:hover .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.fade_in:hover .hover-content-cg {
opacity: 1;
transform: scaleY(1);
}
.image-container-cg.fade_in .clientslogo-image-full-cg.image-default {
opacity: 1;
transform: scaleY(1);
transition: all 0.5s ease;
position: absolute;
inset: 0;
z-index: 1;
}
.image-container-cg.fade_in:hover .clientslogo-image-full-cg.image-default {
opacity: 0;
transform: scaleY(0);
}