2

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>

2 Respostas 2

3

Utilize a propriedade pointer-events na descrição, setando a mesma para none.

Ela fará com que nenhum evento seja lançado em relação a descrição, segue abaixo a forma correta.

.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;
    pointer-events: none;
}
<!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>

-1

Cara, uma alternativa que sempre dá certo comigo é colocar a imagem como background da div em que o texto está. Então, no css vc coloca opacidade diretamente no background da div ao passar o mouse (hover) e, assim, em qualquer ponto que seu mouse estiver dentro daquela div, ou seja, mesmo sobre o texto, sua imagem estará transparente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .