Diaporama en arrière plan

Fermé
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 25 nov. 2021 à 18:47
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 27 nov. 2021 à 10:13
Bonjour,
J'ai un diaporama issu d'un modèle, le problème c'est que en cliquant dessus, l'image devient fullscreen mais la têtière et le button_up reste en premier plan, ainsi que les 3 bulles d'un slider situé bien plus haut.
J'ai bien vérifier les z-index, c'est une histoire de fou !
Voici les CSS du diaporama :

.grid {
position: relative;
margin: 0 auto;
}

.js .grid::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background: #252323 url(../img/loading.svg) no-repeat 50% 75px;
background-size: 60px auto;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.js .grid--loaded::after {
opacity: 0;
}

.grid__item {
width: 270px;
padding: 10px;
}

.grid__item--current {
opacity: 0 !important;
}

.img-wrap {
display: block;
}

.img-wrap:focus,
.img-wrap:hover {
outline: none;
}

.img-wrap img {
display: block;
max-width: 100%;
}

.preview {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
pointer-events: none;
}

.preview--open {
pointer-events: auto;
}


/* circle overlay (generated SVG) */

.overlay {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}

.overlay circle {
-webkit-transition: fill-opacity 0.3s, -webkit-transform 0s 0.3s;
transition: fill-opacity 0.3s, transform 0s 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transform: scale3d(0, 0, 1);
transform: scale3d(0, 0, 1);
fill: #1f1d1d;
fill-opacity: 0;
}

.preview--open .overlay circle {
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
fill-opacity: 1;
}

.clone {
position: fixed;
z-index: 110;
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
transition: transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
-webkit-backface-visibility: hidden;
}

.original {
position: relative;
z-index: 120;
display: block;
object-fit: contain;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-backface-visibility: hidden;
}

.preview--open .animate {
/* open */
-webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
transition: transform 0.6s, opacity 0.2s;
}

.animate {
/* close */
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}

.description {
color: #fff;
}

.js .description--grid {
display: none;
}

.description--preview {
position: fixed;
z-index: 140;
bottom: 0;
left: 0;
width: 100%;
padding: 2em 1em;
text-align: center;
opacity: 0;
background: linear-gradient(180deg, transparent, #1f1d1d);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}

.preview--open .description--preview {
opacity: 1;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}


/* Close button */

.action {
font-size: 2em;
margin-top: 300px;
padding: 0;
cursor: pointer;
color: #6bd68a;
border: none;
background: none;
z-index: 999999999999999;
}


.action:hover,
.action:focus {
color: #6bd68a;
outline: none;
}

.action--close {
position: fixed;
z-index: 99999999;
top: 0;
right: 0;
padding: 1em;
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: scale3d(0.6, 0.6, 1);
transform: scale3d(0.6, 0.6, 1);
}

.preview--image-loaded .action--close {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}






Comment faire pour que seul s'affiche la photo, la légende et le btn close ?
Merci pour votre aide,
E.


A voir également:

1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
27 nov. 2021 à 10:13
Bonjour,

Il faudrait partager le code html complet avec le css du menu (têtière) et du button_up pour identifier le problème.

En reprenant la page indiqué dans la précédente discussion, il semble que le problème vient bien des z-index : le #btn_up a un z-index défini à 99999999 alors que le preview pour afficher l'image en fullscreen a un z-index défini à 1000.
Le z-index défini sur le menu semble également trop grand par rapport au preview.
1