Espace vide dans un effet en Jquery

Fermé
sabledepaix - 14 févr. 2014 à 18:29
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
- 14 févr. 2014 à 19:44
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;
}*/

1 réponse

animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
715
Modifié par animostab le 14/02/2014 à 19:44
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.
0