Effect appear text when mouse and transparency in photo

Asked

Viewed 1,139 times

2

Good evening Everyone

I was able to make the effect of passing the mouse arrow and making the image transparent and make the text appear on top of the photo, but I can’t solve the following problem: when I pass the mouse arrow over the word the image is normal opacity. What I wanted exactly was that when passing the mouse the text appeared and the image was transparent.

Anyone who can help me, I really appreciate.

Follows the code:

.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>

html css

2 answers

3


Use the property Pointer-Events in the description, setting it to None.

It will cause no event to be released relative to the description, follows below the correct form.

.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

Dude, an alternative that always works with me is to put the image as the background of the text in which the text is. Then, in css you put opacity directly in the background of the div when passing the mouse (Hover) and thus at any point that your mouse is inside that div, that is, even on the text, your image will be transparent.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.