Esta es la primera opción de personalización con código css para las cajas de información de resultados de inmuebles con el siguiente estilo:
Lo único que debes de hacer es copiar y pegar el siguiente fragmento de código en un lugar donde configures tu css globalmente y listo.
/** CAJAS DE INFORMACIÓN
* 1. CAJA DE INMUEBLES
* 2. CAJAS LATERALES DETALLE DE INMUEBLE
* 3. CAJAS DE INFORMACIÓN
**/
.card {
border-radius: 10px !important;
border: 0px solid rgba(0, 0, 0, 0.125) !important;
box-shadow: 0px 8px 16px rgb(38 50 56 / 16%);
list-style: none;
margin: 10px 0 0 10px;
position: relative;
}
.card a, .card p {
font-size: 1rem;
margin-bottom: .5rem;
}
.card-space {
border-radius: 25px !important;
padding: 1% !important;
}
.card:before {
content: '';
display: block;
width: 100%;
}
.card:hover .card__background {
transform: scale(1.05) translateZ(0);
}
.card:hover>.card:not(:hover) .card__background {
filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}
.card__background {
background-position: center !important;
background-size: cover !important;
border-radius: var(--spacing-l);
bottom: 0;
filter: brightness(0.75) saturate(1.2) contrast(0.85);
left: 0;
min-height: 40vh;
right: 0;
top: 0;
transform-origin: center;
transition: filter 200ms linear, transform 200ms linear;
trsnsform: scale(1) translateZ(0);
}
.card__category {
color: var(--text-lighter);
font-size: 0.9rem;
margin-bottom: var(--spacing-s);
text-transform: normal;
}
.card__content {
bottom: 0;
left: 0;
margin-bottom: var(--spacing-s);
padding: var(--spacing-l);
position: absolute;
}
.card__heading {
color: var(--text-lighter);
font-size: 1.5rem;
line-height: 1.4;
margin: 0%;
text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
}
.imagenportada {
border-radius: 20px 20px 0 0;
}
.card-inmueble-caracteristicas div.row > div {
margin-top: 3%;
}
.card-inmueble-caracteristicas div.row > div a{
color: var(--cmsmasters-link-colors-normal);
}
/** CAJAS DE INFORMACIÓN **/