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% / 4); 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-child{ vertical-align: baseline; } } } } &:not(.home){ #start{ margin-top: calc( 2rem + #{$Flhome}); } } }