Bonjour à tous,

Je souhaiterais mettre en place un texte qui sera dissimulé partiellement en dégradé et afficher un bouton "Afficher plus" pour afficher le texte complet puis un bouton "Afficher moins" pour dissimuler à nouveau une partie du texte en dégradé.

Pour illustrer ma demande, je vous mets en lien un produit dont la description utilise exactement l'affichage que je souhaite : 

https://www.doyoueven.com/products/excel-leggings-sky-blue

Dans l'attente de vos retours

Cordialement

Salut,

tu as juste à inspecter le code du site et tu as la solution.

pourquoi ne pas utiliser du Js ? 

allez cadeau: https://codepen.io/AnimalInstinct/pen/Dbgem

Bonsoir,

J'ai oublié de préciser que je suis un vrai débutant en CSS et HTML..

J'ai essayé de reprendre le code du site mais le résultat n'y est pas, il me semble qu'il y a aussi un script derrière ?

Merci Baiawai, le script est bon mais comment dissimuler partiellement le début du texte en effet dégradé svp ?

Bonjour,

J'ai enfin pu trouver ce que je recherchais : https://jsfiddle.net/9bp1rc0e/1/

Toutefois, le contenu caché lorsqu'il s'affiche, se superpose à la div suivante et masque donc le contenu de cette div.

Voici les codes :

.content {
  background: white;
  z-index: 1;
  position:relative;
  height: auto;
  overflow: hidden;
}

.content:before, .content:after{
  -webkit-transiton: all 300ms ease;
  -moz-transiton: all 300ms ease;
  transiton: all 300ms ease;
}

.content.masked{
  height: 100px;
}

.content.open{
  padding-bottom: 30px;
}

.content.masked:before {
  content: "Read More";
  position: absolute;
  bottom:10px;
  left:0;
  width:100%;
  z-index: 3;
  text-align: center;
}

.content.masked:after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  z-index: 2;
  background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
  background: -moz-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
  background: -o-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
  background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
}

.content.open:before {
  content: "Read less";
  position: absolute;
  bottom:10px;
  left:0;
  width:100%;
  z-index: 3;
  text-align: center;
}

.content.open:after {
  content: none;
}

Savez-vous quelle partie du CSS je pourrais modifier pour éviter ce conflit ?

Merci encore

.content {
  background: white;
  z-index: 1;
  position:relative;
  height: auto;
  overflow: hidden;


 margin:20px;
}
 

Surement à cause de de la position:absolute;

ici tu indique un left:0; test avec un margin-left:0; deja 

Bonjour,

J'ai testé avec le margin-left:0 qui n'a pas fonctionné.

Mais après 3 jours de galère, j'ai enfin trouvé le problème !

La div juste avant celle ci avait un height: 150px; en l'enlevant, le problème n'apparaissait plus :) 

Merci Baiawai de ton aide

Bon dimanche !