/* Reset .tiles { width: 1040px; font-size: 0; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }*/ .tiles .tile { display: inline-block;/* margin: 10px;*/ text-align: left; opacity: 0.99; overflow: hidden; position: relative; border-radius: 3px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); } .tiles .tile:before { content: ""; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); width: 100%; height: 50%; opacity: 0; position: absolute; top: 100%; left: 0; z-index: 2; transition-property: top, opacity; transition-duration: 0.3s; } .tiles .tile img { display: block; max-width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .tiles .tile .details { font-size:1.2vmin ; padding: 20px; color: rgb(175, 16, 16); position: absolute; bottom: 0; left: 0; z-index: 3; } .tiles .tile .details span { display: block; background-color: blue; border-radius: 4px; /*taille font span tile*/ font-size:1.2vmin ! important; color: white; text-align: center; padding: 10px; opacity: 0; position: relative; top: 100px; transition-property: top, opacity; transition-duration: 0.3s; transition-delay: 0s; } .tiles .tile .details .title { line-height: 1; font-weight: 600; font-size: 18px; } .tiles .tile .details .info { /*taille font span info*/ font-size:1.3vmin ! important; color: white; text-align: center; line-height: 1.2; margin-top: 5px; font-size: 1.2rem; } .tiles .tile:focus:before, .tiles .tile:focus span, .tiles .tile:hover:before, .tiles .tile:hover span { opacity: 1; } .tiles .tile:focus:before, .tiles .tile:hover:before { top: 50%; } .tiles .tile:focus span, .tiles .tile:hover span { top: 0; } .tiles .tile:focus .title, .tiles .tile:hover .title { transition-delay: 0.15s; } .tiles .tile:focus .info, .tiles .tile:hover .info { transition-delay: 0.25s; }