/* ----------------------------------------- */ /* Content Template: Loop item in Affichage toutes les galeries - start */ /* ----------------------------------------- */ h2.galerie-title { position:absolute; top:150px; left:0; right:0; bottom:0; letter-spacing: 0; color: white; font-size: 20px; visibility:hidden; } .gal-box-child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; } span.galerie-date { color: white; /* Good thing we set a fallback color! */ padding: 25%; font-size: 20px; position: absolute; visibility:hidden; top: 40px; bottom: 0; left: 0; right: 0; text-transform:uppercase; letter-spacing:1px; font-weight:300; } span.galerie-date:after { content: ""; display: block; margin: 6px auto; width: 80px; height: 2px; background-color:#cc0000; } .gal-box-parent:hover span,.gal-box-parent:focus span, .gal-box-parent:hover h2, .gal-box-parent:focus h2 { display: block; visibility:visible; text-shadow: 1px 1px 10px black; } } .gal-box-child { text-align:center; vertical-align: center; color:white; transition: all .5s; } .gal-box-parent:hover .gal-box-child, .gal-box-parent:focus .gal-box-child { transform: scale(1.10); transition: all .5s; } .gal-box-parent { overflow: hidden; text-align:center; } .gal-box-child { width: 100%; height: 100%; background-color: grey; /* fallback color */ background-position: center; background-size: cover; } /*MOBILE*/ @media only screen and (max-width:961px) { gal-box-child > span.galerie-date, h2 { visibility:visible; text-shadow: 1px 1px 10px black; } .gal-box-parent:hover span.galerie-date,.gal-box-parent:focus span.galerie-date, span.galerie-date { visibility:hidden; } span.galerie-date:after { top: 10px; position: relative; visibility:visible; } span.galerie-date { visibility:hidden; } h2.galerie-title { visibility:visible; } } /* ----------------------------------------- */ /* Content Template: Loop item in Affichage toutes les galeries - end */ /* ----------------------------------------- */