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 !