In CSS, how do I, when giving a "Hover" in a text, give the image a "Scale(xx)" and underline the text?

Asked

Viewed 344 times

0

In addition to the text underline, how do I, at the same time as this occurs, give the image a Scale(xx)? The image and the text have different classes in my CSS file. I just need a north, a way to proceed.

Imagem exemplificativa da minha questão

css html5

  • Put your code to us, then we can help you not only by giving a north but possibly solving your problem.

2 answers

2


Since a code wasn’t posted, take a look at this example, I think that’s what you’re looking for.

rather than being a div, will be a picture.

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

  • Thanks for the answer. What you presented was enough and I also ended up finding your example in another way at https://answall.com/questions/90199/efeito-hover-em-um-elemento-afetar-other

  • I’m glad you made it, if at all possible, mark my answer as the key.

0

I believe 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, it’s separate in what each thing does. See that inside the hover you add what you would like to do with the selected element before the hover in such cases, the tags imgand h3.

It’s simple, I hope I’ve helped.

Browser other questions tagged css html5

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