*{ box-sizing: border-box; } html, body, header{ background: #f9f9f9fe; } body{ #start{ width: calc( #{$Wi} - #{$marg} ); margin: $marg auto auto $marg; #text_figli{ p { a{ position: relative; // &::after{ // display: block; // content: ''; // position: absolute; // top: 0; // left: 0; // transform: translate(-25%,-65%); // z-index: 999; // } // &:hover{ // &::after{ // content: url('/user/themes/figureslibres/images/ovale.svg'); // width: 100%; // height: 100%; // top: 0; // left: 0; // } // } &.marg{ margin-right: $marg; } } } .card{ width: calc((100% / 3) - ( #{$marg} * 2) ); height: auto; // overflow: hidden; display: inline-block; vertical-align: top; line-height: 0; margin-right: $marg; position: relative; margin-top: $marg; .card-header{ display: none; & > *{ font-size: 0.8rem; line-height: 1rem; margin-right: $marg; } } &:hover{ .card-header{ width: 100%; background: rgba(255, 255, 255, 0.5); padding: $marg; display: inline-flex; flex-wrap: wrap; position: absolute; transform: translateY(-100%); } } &:last-of-type{ vertical-align: baseline!important; } #item{ width: calc( 307% - #{$marg} ); // margin-left: -50vw; } } } } &:not(.home){ #start{ margin-top: calc( 2rem + #{$Flhome}); } } }