css Efecto hover en listados

Posted 2021-05-13

    jQuery(document).ready(function($) {
      
        /*La lógica solo se aplica en escritorio y tablet - para ello tenemos que incorporar las class en el context 'General Desktop'*/
        if($('body.context-desktop').size()>0){

            jQuery(".contenedor-listado").mouseover(function(){

                jQuery(this).addClass("z-index");
                jQuery(this).find(".contenedor-listado-interior").find(".views-field-field-descripcion-corta").hide();
                jQuery(this).find(".contenedor-listado-interior").find(".blk-datos").show();
                return false;


            }).mouseout(function(){
                jQuery(this).removeClass("z-index");
                jQuery(this).find(".contenedor-listado-interior").find(".views-field-field-descripcion-corta").show();
                jQuery(this).find(".contenedor-listado-interior").find(".blk-datos").hide();
                return false;
            });
        }
    });

Views columns class 
class: contenedor-listado

Campo personalizado 
Class: contenedor-listado-interior

<!-- Ejemplo contenedor -->

<div class="views-field-image img-responsive">
    <div class="field-inner">
        [field_image]
    </div>
</div>
<div class="views-field-title">
    <div class="field-inner">
        [name_i18n]
    </div>
</div>
<div class="views-field-field-descripcion-corta">
    <div class="field-inner">
        [description_i18n]
    </div>
</div>
<div class="blk-datos"> <!-- Este div es el que contiene los elementos que se mostraran en el hover -->
    <div class="views-field-field-descripcion-larga">
        <div class="field-inner">
            [field_descripcion_larga]
        </div>
    </div>
</div>

.z-index {
    z-index: 10;
}
.contenedor-listado{
    height: 350px;
    overflow: visible;
    clear:none;
    margin-bottom: 30px;
}
.contenedor-listado.z-index .contenedor-listado-interior{
    background: #FFFFFF;
    -webkit-box-shadow: 0 0 9.5px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 9.5px 0 rgba(0,0,0,0.3);
    box-shadow: 0 0 9.5px 0 rgba(0,0,0,0.3);
    float: left;
    z-index: 4;
    padding-bottom: 20px;
}
.contenedor-listado-interior .field-inner{
    margin-left:10px;
    margin-right:10px;
}
.contenedor-listado-interior .views-field-field-descripcion-corta{
    margin-left:0;
    margin-right:0;
    margin-bottom:10px;
}
.contenedor-listado-interior .blk-datos {
    display:none;
    z-index: 999;
    float:left;
    background:#FFFFFF;
    padding-bottom:20px;
}
.contenedor-listado-interior .views-field-field-descripcion-larga{
    z-index: 999;
}