Espace vide dans un effet en Jquery
sabledepaix
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai voulu prendre un effet de texte ouvrant, et remplacer le texte par des images; seulement j'ai un problème avec la 1ère image. Il y a 300 pixels d'espace en trop entre l'image 1 coupé et l'image 2. Je pensais que en mettant un padding-bottom ça règlerait le problème, mais c'est toujours pareil. Je m'y connais un peu en CSS mais là je suis perdue. Avez-vous des conseils ?
Merci
Voici l'aperçu de la feuille style CSS :
.cs-text-cut {
width:1656px;
position: relative;
overflow:hidden;
zoom:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.cs-text-cut span {
display: block;
position:relative;
color: rgba(0,0,0,1);
text-align: center;
font-family: 'Verdana', cursive;
}
.cs-text-cut:last-child span {/*margin-top: -84px;*/}
.cs-text-mid {font-family: 'Raleway', sans-serif;
cursor:pointer;
/*top: 50%;*/
height:300px;
position: absolute;
overflow-style:auto;
color: rgba(0,0,0,0.6);
text-shadow: 0 0 0 rgba(100,100,100,0.9);
opacity: 100;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.cs-text:hover .cs-text-cut:first-child {
-webkit-transform: translateY(-300px);
-moz-transform: translateY(-300px);
-o-transform: translateY(-300px);
-ms-transform: translateY(-300px);
transform: translateY(-300px);
opacity: 100;
}
.cs-text:hover .cs-text-cut:last-child {
-webkit-transform: translateY(300px);
-moz-transform: translateY(300px);
-o-transform: translateY(300px);
-ms-transform: translateY(300px);
transform: translateY(300px);
opacity: 100;
}
.cs-text:hover .cs-text-mid {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
opacity: 100;
/*text-align:center;*/
/*vertical-align:central;*/
-webkit-transform: scale(1);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(1);
/*}.main .cs-text .cs-text-mid img {
position: absolute;
visibility:visible;
}*/
J'ai voulu prendre un effet de texte ouvrant, et remplacer le texte par des images; seulement j'ai un problème avec la 1ère image. Il y a 300 pixels d'espace en trop entre l'image 1 coupé et l'image 2. Je pensais que en mettant un padding-bottom ça règlerait le problème, mais c'est toujours pareil. Je m'y connais un peu en CSS mais là je suis perdue. Avez-vous des conseils ?
Merci
Voici l'aperçu de la feuille style CSS :
.cs-text-cut {
width:1656px;
position: relative;
overflow:hidden;
zoom:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.cs-text-cut span {
display: block;
position:relative;
color: rgba(0,0,0,1);
text-align: center;
font-family: 'Verdana', cursive;
}
.cs-text-cut:last-child span {/*margin-top: -84px;*/}
.cs-text-mid {font-family: 'Raleway', sans-serif;
cursor:pointer;
/*top: 50%;*/
height:300px;
position: absolute;
overflow-style:auto;
color: rgba(0,0,0,0.6);
text-shadow: 0 0 0 rgba(100,100,100,0.9);
opacity: 100;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.cs-text:hover .cs-text-cut:first-child {
-webkit-transform: translateY(-300px);
-moz-transform: translateY(-300px);
-o-transform: translateY(-300px);
-ms-transform: translateY(-300px);
transform: translateY(-300px);
opacity: 100;
}
.cs-text:hover .cs-text-cut:last-child {
-webkit-transform: translateY(300px);
-moz-transform: translateY(300px);
-o-transform: translateY(300px);
-ms-transform: translateY(300px);
transform: translateY(300px);
opacity: 100;
}
.cs-text:hover .cs-text-mid {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
opacity: 100;
/*text-align:center;*/
/*vertical-align:central;*/
-webkit-transform: scale(1);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(1);
/*}.main .cs-text .cs-text-mid img {
position: absolute;
visibility:visible;
}*/
A voir également:
- Espace vide dans un effet en Jquery
- Espace insécable - Guide
- Espace de stockage gmail plein - Guide
- Supprimer page word vide - Guide
- Effet miroir word - Guide
- Espace stockage google - Guide
1 réponse
Salut difficile a dire sans l'url
deja une erreur la
....
transform: scale(1);
/*}.main .cs-text .cs-text-mid img { .....
placer /* après {
sinon cela doit venir de
.cs-text:hover .cs-text-cut:first-child
ou
.cs-text:hover .cs-text-cut:last-child
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
deja une erreur la
....
transform: scale(1);
/*}.main .cs-text .cs-text-mid img { .....
placer /* après {
sinon cela doit venir de
.cs-text:hover .cs-text-cut:first-child
ou
.cs-text:hover .cs-text-cut:last-child
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.