Personalización Visual De Cajas De Información - Visual Inmueble Herramienta Para Páginas Web
View Categories

Personalización visual de Cajas de información

1 minutos de lectura

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:

Captura de pantalla 2024 10 11 a las 7.19.49 a.m Visual Inmueble Herramienta para páginas web

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 **/

Funciona con BetterDocs