Problème de texte qui apparait :)

cooki137
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Transition</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>

        <p class="welcome1">Télécharger des vidéos pour le CDI!</p>
        <p class="download"> Download Now >> </p> <a class="download2" href="#">                       Clique ici ! </a>

</html>

CSS:


p.welcome1{
    transition: 0.8s;
    font-family: 'Jam Sessions Personal Use';
    color: #F4F4F4;
    font-size: 75px;
    text-shadow: 2px 2px 15px black;
    position: absolute;
    top: 75px;
    left: 120px;
}

p.welcome1:hover{

    transition: 0.8s;
    text-shadow: 2px 2px 3px black;
    top: 270px;
    color: black;
    text-shadow: 2px 2px 15px white;
}

body{

    background-image: url(http://koreus.cdn.li/thumbshigh/201601/landscapes-volume-4k-timelapse.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

p.download{
    width: 28%;
    transition: 0.5s;
    font-family: 'Lucida Console';
    color: #38EBF7;
    font-size: 40px;
    position: absolute;
    top: 250px;
    left: 300px;
    border-radius: 25px;
    border: 2px #4A8DEE solid;
    padding: 5px;
    margin: 5px;
    background-color: #E6FAFF;
    text-shadow: 2px 2px 1px black;
}

p.download:hover{
    transition: 0.5s;
    background-color: white;
    color: blue;
    text-shadow: 2px 2px 1px black;
    width: 50%;

}

Ce que je veux

Je voudrai avec uniquement du CSS qu'avec un :hover sur le Download now >> étendre le background avec le width un peu pour pouvoir ajouter du texte sur la suite de ce background. Je sais pas si j'ai été claire c'est mon premier post ;)

Ce que j'obtiens

Tout ce que je veut sauf que je ne sais pas comment faire apparaître le texte !

2 réponses

Roak

Salut,

Je pense qu'il te faut passer ton lien .download2 dans le paragraphe .download.

<p class="download">Download >> <a href="#">Cliquez ici !</a></p>

Mais également donner une taille fixe à ton paragraphe avec un overflow hidden.

.download {
  width: 25%;
  overflow: hidden;
  transition: width .5s ease;
}
.download:hover {
  width: 50%;
}

Normalement comme ça, ça devrait fonctionner :)

Lartak

Bonsoir.
Pourquoi avoir créé deux fois le même sujet ?
La seule chose qui diffère entre les deux sujets, c'est une partie des noms, le contenu est totalement identique.