In addition to the underline text, how do I make a scale (xx) at the same time as this? The image and text have different classes in my CSS file. I just need a north, a way to go.
In CSS, how do I, when giving a hover in a text, the image give a "scale (xx)" and underline the text?
0
asked by anonymous 31.10.2018 / 15:51
2 answers
2
As a code was not posted, take a look at this example, I think that's what you're looking for.
Instead of being a div , it's going to be an image.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.zoom:hover span{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"><span>Texto</span></div>
</body>
</html>
31.10.2018 / 16:06
0
I think that's what you're looking for:
img:hover {
transform: scale(1.05);
}
h3:hover {
text-decoration: underline;
}<div>
<img src="https://i.stack.imgur.com/ygG9V.png"alt="BolsoMito">
</div>
<div>
<h3>
Bolsonaro e sua equipe nos ajudará a sair dessa crise.
</h3>
</div> This code will give you a north, is separate in what each thing does.
Note that within hover you add what you would like to do with the selected element before hover in these cases, the img and h3 tags.
It's simple, I hope I've helped.
31.10.2018 / 16:08