deroulement fenetre

12 avril 2019 à 11:38:38

Bonjour !

j'aimerai savoir comment faire pour avoir un texte qui apparait lorsque je fais un hover sur une image (comme sur ce site https://clients.riacreation.fr/ mais en l’occurrence vers le bas)

voici mon code:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="style.css" />
    <title>ENTRAINEMENT</title>
  </head>
  <body>
    <h1>Some pictures ...</h1>
    <div class="content">
      <div class="case">
        <div class="media">
          <img src="picture.jpeg" alt="an_image" />
        </div>
        <div class="description">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </div>
      </div>
    </div>
  </body>
</html>

CSS

body {
  background-color: lightgoldenrodyellow;
}

h1 {
  font-size: 16px;
  margin-left: 30%;
}

div.content {
  display: flex;
  justify-content: space-around;
}

div.description {
  display: none;
}

div.case {
  box-shadow: 0px 0px 10px #aaa;
  transition-duration: 1000ms;
}

div.media {
  height: auto;
  position: relative;
}

img {
  width: 100%;
  transition-duration: 500ms;
}

img:hover {
  transform: scale(1.2);
  z-index: 1;
}

Je voudrai en faite que la div "case" s’agrandisse vers le bas pour laisser apparaitre la description, pouvez-vous m'aider?

-
Edité par MonsieurX12 12 avril 2019 à 11:42:06

Fantasnia

12 avril 2019 à 12:28:24

Bonjour,

Peut-être que ceci pourras t'aider -> https://openclassrooms.com/forum/sujet/realiser-un-div-deroulant-en-css3

Sinon moi je te dirais Javascript... Je pourrais t'aider sur ce point.

"L'échec n'est qu'une occasion de recommencer de façon plus intelligente." H.Ford

AliasDmc

13 avril 2019 à 19:57:53

Bonjour MonsieurX12 ,

D'autres exemples :

https://codepen.io/Zonecss/pen/rQNvRV

Découvrez les Css avec la zonecss.fr

MonsieurX12

3 mai 2019 à 11:52:13

Merci beaucoup pour vos réponses