Hover over the image and change the caption color

2

Good morning dear friends, I wanted to know how to move the mouse over an image, and the background of the caption change color, in the example below I can only change the color when I specifically step over the caption. How do I move the mouse in the image and in css call the other element to change color?

@charset "UTF-8";
@font-face {
    font-family: Agency FB;
    src: url(../_fontes/agencyfb.ttf);
}
html {
  overflow-y: scroll;
}
/*Corpo do site*/
.postagem {
	background-color: rgba(255,140,40,.0px;);
	margin: 0px;
	font-family: arial;	
	font-size: 1.2vw;
}
/*Divisão de conteudo do meu site*/
#interface {
	width: 90%;
	background-color: white;
	margin: 90px auto 10px auto;
	box-shadow: 0px 4px 6px 3px rgba(0,0,0,.1);
	}	
/*Cabeçalho do meu site*/
.cabecalho {
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: rgba(255,140,40,1);
	transition: 4s;
	margin: 0px;
	padding: 0px;
}	
.logo {
	position: relative;
	float: right;
	padding: 0px;
	margin: 25px 35% 0px 0px;
	color: rgba(255,255,255,1);
	font-family: 'Agency FB';
	font-size: 2vw;
}
#fcor {
	color: rgba(255,220,180,1);
}
/*Menu*/
.menu {
	float: left;
}
.mn {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-transform: uppercase;
}
.icon{
}
.mn a {
	text-decoration: none;
	color: white;
}
.im {
	font-weight: 600;
	text-align: center;
	color: white;
	font-size: 1vw;
	transition: 0s;
	font-family: 'Agency FB';
	padding: 10px 10px 22px 10px;
	margin: 0px;
	display: inline-block;
}
.efc {
}
.im:hover {
	transition: 0.2s;
	background-color: rgba(244,116,0,1);
}
/*Postagens*/
.artigo {
	padding: 15px 25px 15px 25px;
}

.titulo {
	font-family: arial;
	font-size: 12pt;
	color: rgba(0,0,0,.8);
	margin: 0px 0px 5px 0px; 
	padding: 0px;
}

.paragrafo {
	margin: 0px;
	padding: 0px;
	color: rgba(0,0,0,.6);
	font-family: arial;
	text-align: justify;
}
.li {
	font-size: 20pt;
	font-weight: 900;
}
.link {
	color: black;
	text-decoration: none;
}
.link:hover {
	font-style: none;
	text-decoration: underline;
}
.icone {
	transition: 2s;
	border: solid white 6px;
	box-shadow: 4px 4px 6px 2px rgba(0,0,0,0.1);
	height: 400px;
	width: 600px;
}
/*Folhas de estilo de tabela*/
.tabela {
	border-collapse: collapse;
}
.tdn {
	border: solid black 2px;
	padding: 2px;
}
.vazio {
	border: solid black 2px;
	padding: 12px;
}
.vazio#vm {
	padding: 36px;
}
.tabt {
	background-color: white: ;
	padding: 2px;
	border: solid black 2px;
}
.subt {
	background-color: lightgray;
	padding: 2px;
	border: solid black 2px;
}
.ft {
	border: solid black 2px;
}
.asst {
	padding: 12px;
	font-weight: 900;
	text-align: center;
}
.galeria {
  display: flex;
  justify-content: center;
  padding: 5px
}
.galeria a {
  margin: 10px 10px 10px 10px;
}
.post {
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
}
.imgp {
  width: 100%;
  height: 100%;
}

.legenda {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0px;
  color: white;
  padding: 10px;
  background-color: rgba(0,0,0,.7);
  font-size: 9pt;
  
}
.legenda:hover {
	background-color: rgba(255,140,40,1);

}
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<link rel="icon" href="_imagens/icon.png" type="image/x-icon" />
		<link rel="shortcut icon" href="_imagens/icon.png" type="image/x-icon" />
		<title>Processos e Manuais de Instruções</title>
		<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
		<link rel="stylesheet" type="text/css" href="_css/fotos.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).scroll(function(){vary=$(this).scrollTop();if(y<25){$('.logo').css({'margin':'25px35%0px0px'});$('.im').css({'padding':'10px10px22px10px'});$('.icon').css({'display':'inline-block'});$('.efc').css({'display':'initial'});$('.cabecalho').css({'transition':'4s'});}else{$('.logo').css({'margin':'2px35%0px0px'});$('.im').css({'padding':'10px10px10px10px'});$('.icon').css({'display':'none'});$('.efc').css({'display':'none'});$('.cabecalho').css({'transition':'4s'});}});</script></head><bodyclass="postagem">
			<header class="cabecalho">
				<nav class="menu">
					<h1 hidden="true">Menu Principal</h1>
					<ul class="mn"> 
					       <a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/hEiU5f/icasa.png"><brclass="efc">Home</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/f46hQf/ilivro.png"><brclass="efc">Manuais e Processos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/it5bkf/iferramentas.png"><brclass="efc">Equipamentos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/irX0BL/ietiqueta.png"><brclass="efc">Inventário</li></a>
					</ul>
				</nav>
				<h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA</span></h1>	
			</header>
		<div id="interface">
			<section class="galeria">
				<a href="_postagem/1009182.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/kORwJ0/check.jpg"><figcaptionclass="legenda">Checklist de manutenção de computador</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009181.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/gbsE5f/win10.jpg"><figcaptionclass="legenda">Instalar sistema operacional (Windows 10)</figcaption>
						</figure>
				</a>
				<a href="_postagem/1009185.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iD2srL/oracle.png"><figcaptionclass="legenda">Instalar o software Oracle</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009186.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iniAd0/office.png"><figcaptionclass="legenda">Instalar o pacote office</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009187.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/dMaZ5f/vnc.png"><figcaptionclass="legenda">Instalar UltraVNC Viewer</figcaption>
					</figure>
				</a>
				
			</section>
		</div>
	</body>
	</html>
    
asked by anonymous 16.10.2018 / 18:22

2 answers

1

Just make a rule that when you do :hover in parent you change the color of child .

Ex:

<pai>
    <filho></filho>
</pai> 

pai:hover filho { css }

In your case, when you do the :hover in the figure class .post it changes the color of the .legenda that is inside it.

See how it goes

    @charset "UTF-8";
@font-face {
    font-family: Agency FB;
    src: url(../_fontes/agencyfb.ttf);
}
html {
  overflow-y: scroll;
}
/*Corpo do site*/
.postagem {
	background-color: rgba(255,140,40,.0px;);
	margin: 0px;
	font-family: arial;	
	font-size: 1.2vw;
}
/*Divisão de conteudo do meu site*/
#interface {
	width: 90%;
	background-color: white;
	margin: 90px auto 10px auto;
	box-shadow: 0px 4px 6px 3px rgba(0,0,0,.1);
	}	
/*Cabeçalho do meu site*/
.cabecalho {
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: rgba(255,140,40,1);
	transition: 4s;
	margin: 0px;
	padding: 0px;
}	
.logo {
	position: relative;
	float: right;
	padding: 0px;
	margin: 25px 35% 0px 0px;
	color: rgba(255,255,255,1);
	font-family: 'Agency FB';
	font-size: 2vw;
}
#fcor {
	color: rgba(255,220,180,1);
}
/*Menu*/
.menu {
	float: left;
}
.mn {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-transform: uppercase;
}
.icon{
}
.mn a {
	text-decoration: none;
	color: white;
}
.im {
	font-weight: 600;
	text-align: center;
	color: white;
	font-size: 1vw;
	transition: 0s;
	font-family: 'Agency FB';
	padding: 10px 10px 22px 10px;
	margin: 0px;
	display: inline-block;
}
.efc {
}

/*Postagens*/
.artigo {
	padding: 15px 25px 15px 25px;
}

.titulo {
	font-family: arial;
	font-size: 12pt;
	color: rgba(0,0,0,.8);
	margin: 0px 0px 5px 0px; 
	padding: 0px;
}

.paragrafo {
	margin: 0px;
	padding: 0px;
	color: rgba(0,0,0,.6);
	font-family: arial;
	text-align: justify;
}
.li {
	font-size: 20pt;
	font-weight: 900;
}
.link {
	color: black;
	text-decoration: none;
}
.link:hover {
	font-style: none;
	text-decoration: underline;
}
.icone {
	transition: 2s;
	border: solid white 6px;
	box-shadow: 4px 4px 6px 2px rgba(0,0,0,0.1);
	height: 400px;
	width: 600px;
}
/*Folhas de estilo de tabela*/
.tabela {
	border-collapse: collapse;
}
.tdn {
	border: solid black 2px;
	padding: 2px;
}
.vazio {
	border: solid black 2px;
	padding: 12px;
}
.vazio#vm {
	padding: 36px;
}
.tabt {
	background-color: white: ;
	padding: 2px;
	border: solid black 2px;
}
.subt {
	background-color: lightgray;
	padding: 2px;
	border: solid black 2px;
}
.ft {
	border: solid black 2px;
}
.asst {
	padding: 12px;
	font-weight: 900;
	text-align: center;
}
.galeria {
  display: flex;
  justify-content: center;
  padding: 5px
}
.galeria a {
  margin: 10px 10px 10px 10px;
}
.post {
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
}
.imgp {
  width: 100%;
  height: 100%;
}

.legenda {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0px;
  color: white;
  padding: 10px;
  background-color: rgba(0,0,0,.7);
  font-size: 9pt;
  
}
.post:hover .legenda {
	transition: 0.2s;
	background-color: rgba(244,116,0,1);
}
/* não precisa amais desse css
.legenda:hover {
	background-color: rgba(255,140,40,1);
}
*/
			<header class="cabecalho">
				<nav class="menu">
					<h1 hidden="true">Menu Principal</h1>
					<ul class="mn"> 
					       <a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/hEiU5f/icasa.png"><brclass="efc">Home</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/f46hQf/ilivro.png"><brclass="efc">Manuais e Processos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/it5bkf/iferramentas.png"><brclass="efc">Equipamentos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/irX0BL/ietiqueta.png"><brclass="efc">Inventário</li></a>
					</ul>
				</nav>
				<h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA</span></h1>	
			</header>
		<div id="interface">
			<section class="galeria">
				<a href="_postagem/1009182.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/kORwJ0/check.jpg"><figcaptionclass="legenda">Checklist de manutenção de computador</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009181.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/gbsE5f/win10.jpg"><figcaptionclass="legenda">Instalar sistema operacional (Windows 10)</figcaption>
						</figure>
				</a>
				<a href="_postagem/1009185.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iD2srL/oracle.png"><figcaptionclass="legenda">Instalar o software Oracle</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009186.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iniAd0/office.png"><figcaptionclass="legenda">Instalar o pacote office</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009187.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/dMaZ5f/vnc.png"><figcaptionclass="legenda">Instalar UltraVNC Viewer</figcaption>
					</figure>
				</a>
				
			</section>
		</div>
    
16.10.2018 / 18:48
0

You have to put the hover in a parent tag, but change the color of the child. In your case, just change the last CSS rule to:

.post:hover .legenda {
    background-color: rgba(255,140,40,1);
}

I did a fiddle to demonstrate!

Adding a transition: all 0.3s ease; together in this rule makes the transition much better

    
16.10.2018 / 18:50