Boa noite Pessoal
Eu consegui fazer o efeito de passar a seta do mouse e deixar a imagem transparente e fazer aparecer o texto em cima da foto, porém não consigo resolver o seguinte problema: quando eu passo a seta do mouse exatamente por cima da palavra a imagem fica com a opacidade normal. O que eu queria exatamente era que ao passar o mouse o texto aparecesse e a imagem ficasse transparente.
Quem puder me ajudar, eu agradeço muito.
Segue o código:
.aro12_bikes1 img {
width: 240px;
}
.aro12_bikes2 img {
width: 297px;
height: 197px;
}
.aro12_bikes3 img {
width: 240px;
}
.aro12_bikes4 img {
width: 297px;
}
.aro12_bikes5 img {
width: 297px;
height: 197px;
}
.aro16_bikes6 img {
width: 297px;
height: 197px;
}
.aro12_bikes6 img {
width: 297px;
height: 197px;
}
.aro12_bikes7 img {
width: 297px;
height: 197px;
}
.aro12_bikes8 img {
width: 297px;
height: 197px;
}
.aro12_bikes9 img {
width: 297px;
height: 197px;
}
.aro16-bikes1, .aro16-bikes2,.aro16-bikes3,.aro16-bikes4,.aro16-bikes5,.aro16-bikes6,.aro16-bikes7,.aro16-bikes8,.aro16-bikes9,.aro16-bikes10,.aro16-bikes11,.aro16-bikes12, img {
height: 198px;
}
.linha-botoes {
margin-top: 25px;
}
.aro24_bikes2 img {
height: 244px;
margin-top: -28px;
width: 107%;
max-width: 200%;
}
.aro24_bikes5 img {
height: 244px;
width: 107%;
max-width: 200%;
}
.aro24_bikes3 img {
height: 212px;
}
.aro26_bikes2 {
margin-top: 28px;
}
.aro26_bikes2 img {
height: 169px;
}
.bikes-1 img:hover, .bikes-2 img:hover, .bikes-3 img:hover, .bikes-4 img:hover, .bikes-5 img:hover, .bikes-6 img:hover {
filter: opacity(50%);
}
.col-md-4:hover .descricao {
display: block;
}
.descricao {
display: none;
color: red;
width: 100%;
font-weight: bold;
font-size: 30px;
position: relative;
top: -4em;
left: 4em;
}
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Bikes</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12" >
<div class="texto-tamanho">
<span> ESCOLHA POR TAMANHO </span>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="linha-botoes">
<a href="#"><button name="aro12">Aro 12 </button></a>
<a href="#"><button name="aro16">Aro 16 </button></a>
<a href="#"><button name="aro20">Aro 20 </button></a>
<a href="#"><button name="aro24">Aro 24 </button></a>
<a href="#"><button name="aro26">Aro 26 </button></a>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-12">
<div class="linha-bikes">
<div class="col-md-4">
<div class="bikes-1">
<a href="#">
<img src="https://i.ibb.co/MhwSM9s/RBC6000.jpg"/>
</a>
<span class="descricao">Aro 12</span>
</div>
</div>
<div class="col-md-4">
<div class="bikes-2">
<a href="#">
<img src="https://i.ibb.co/MhwSM9s/RBC6000.jpg"/>
</a>
<span class="descricao">Aro 16</span>
</div>
</div>
<div class="col-md-4">
<div class="bikes-3">
<a href="#">
<img src="https://i.ibb.co/MhwSM9s/RBC6000.jpg"/>
</a>
<span class="descricao">Aro 20</span>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-12">
<div class="linha-bikes-2">
<div class="col-md-4">
<div class="bikes-4">
<a href="#">
<img src="https://i.ibb.co/MhwSM9s/RBC6000.jpg"/>
</a>
<span class="descricao">Aro 20</span>
</div>
</div>
<div class="col-md-4">
<div class="bikes-5">
<a href="#">
<img src="https://i.ibb.co/MhwSM9s/RBC6000.jpg"/>
</a>
<span class="descricao">Aro 24</span>
</div>
</div>
<div class="col-md-4">
<div class="bikes-6">
<a href="#">
<img src="https://i.ibb.co/MhwSM9s/RBC6000.jpg"/>
</a>
<span class="descricao">Aro 26</span>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="linha-botoes-2">
<div class="row">
<div class="col-md-12">
<a href="#" target="_blank">
<button name="catalogo" > Baixe nosso catálogo </button></a>
</div>
</div>
</div>
<br>
<div class="linha-botoes-3">
<div class="row">
<div class="col-md-12">
<a href="#" target="_blank"> <button name="qualidade">Fotos em alta qualidade </button></a>
</div>
</div>
</div>
</div>
</body>
</html>