Estou programando e treinando HTML nessa página, porém estou com uma dúvida no CSS porém nas class figure.foto-legenda figcaption e figure.foto-legenda:hover, a atributo opacity não estão funcionando, que funcionaria como um fade-in e fade-out. Como resolver isso?
<!doctype html>
<html lang="en">
<head>
<meta charset="Ansi">
<style>
p {
text-align: center;
}
body{
background-color: #6513;
color: rgba(0,0,0,0.5);
/*meu ******/
}
figure.foto-legenda{
border: 8px solid white;
box-shadow: 1px 1px 4px black;
position:relative;
}
figure.foto-legenda img{
width: 40%;
height: 30%;
}
figure.foto-legenda figcaption{
opacity: 0%;
position: absolute;
top: 0px;
background-color: rgba(0,0,0,.5);
color: white;
width:100%;
height:100%;
padding: 10px;
box-sizing: border-box;
transition: opacity 1s;
}
figure.foto-legenda:hover figcaption{
opacity: 1;
}
nav#menu{
display: block;
}
nav#menu li{
list-style:none;
text-transform: uppercase;
display: inline-block;
background-color: #2156;
color: white;
padding: 10px;
margin: 2px;
top: -20px;
left: 100px;
}
</style>
<script src="script.js">
</script>
<title>minha página</title>
</head>
<body>
<script>
alert("Bem vindo a jobs software");
</script>
<div>
<header>
<nav id="menu">
<li>Inicio</li>
<li>contatos</li>
<li>Quem somos</li>
<li>Metas da empresa</li>
<li>projetos</li>
</nav>
</header>
<hgroup>
<h1>
Bem vindo a Empreza Jobs software
</h1>
<h2>
uma filial dos irmaos elmers
</h2>
<h3>
leia o texto de boas vindas
</h3>
</hgroup>
<figure class="foto-legenda">
<img src="https://blog.pmweb.com.br/wp-content/uploads/boas-vindas-email.jpg" width= 300>
<figcaption>
<h3>
nossa mensagem de boas vindas
</h3>
<p>
<h4>
o melhor serviço em desenvolvimento de programas
</h4>
</p>
</figcaption>
</figure>
<h2>
<p>
<i>O que é Lorem Ipsum?</i></h2>
Lorem Ipsum é simplesmente uma simulação de texto da indústria
tipográfica e de impressos, e vem sendo utilizado desde o
século XVI, quando um impressor desconhecido pegou uma bandeja de
tipos e os embaralhou para fazer um livro de modelos de tipos.
Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto
para a editoração ele<wbr>trô<wbr>nica, permanecendo essencialmente inalterado.
Se popularizou na década de 60, quando a Letraset lançou decalques contendo
passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a
programas de editoração eletrônica como Aldus PageMaker.
</p>
<h3>
simbolos especiais
</h3>
€
£
$
≥
√
<p>
essa é a era de ouro da nova tecnologia. Logo logo serãp lançadas no espaço
grandes naves para colonizar novos planetas. x<sup>2</sup>+14x+log<sub>3</sub>70
</p>
</div>
</body>
</html>