2
Good morning dear friends, I wanted to know how to move the mouse over an image, and the background of the legend change color, in the example below I can only change the color when I pass specifically on the legend. You have how 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() {
var y = $(this).scrollTop();
if (y < 25) {
$('.logo').css({'margin': '25px 35% 0px 0px'});
$('.im').css({'padding': '10px 10px 22px 10px'});
$('.icon').css({'display': 'inline-block'});
$('.efc').css({'display': 'initial'});
$('.cabecalho').css({'transition': '4s'});
} else {
$('.logo').css({'margin': '2px 35% 0px 0px'});
$('.im').css({'padding': '10px 10px 10px 10px'});
$('.icon').css({'display': 'none'});
$('.efc').css({'display': 'none'});
$('.cabecalho').css({'transition': '4s'});
}
});
</script>
</head>
<body class="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"><br class="efc">Home</li></a><!--
--><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/f46hQf/ilivro.png"><br class="efc">Manuais e Processos</li></a><!--
--><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/it5bkf/iferramentas.png"><br class="efc">Equipamentos</li></a><!--
--><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/irX0BL/ietiqueta.png"><br class="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">
<figcaption class="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">
<figcaption class="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">
<figcaption class="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">
<figcaption class="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">
<figcaption class="legenda">Instalar UltraVNC Viewer</figcaption>
</figure>
</a>
</section>
</div>
</body>
</html>
An example of what I want, would be Wikihow https://pt.wikihow.com/main page
– Marcos Aurélio