Is there a way where I can enlarge any texts/pictures with the link tag, , using only HTML/CSS?

Question

For my website, if the user hovers over a picture or text line that contains a link, I want the text or picture to enlarge and get bigger. Once the user stops hovering over the text/image, I want the text/image to decrease in size back to its original size.

Is there a way I can do this? Thanks for any help!

Am I getting downvoted, because the format of the question is wrong? — FlamingNinja925, May 12 '21 at 15:12
Does this answer your question? [Image Enlarge on Hover](https://stackoverflow.com/questions/43288553/image-enlarge-on-hover) and [Increase text size on hover](https://stackoverflow.com/q/48388963/215552) — Heretic Monkey, May 12 '21 at 15:13
@HereticMonkey This uses some things I haven't learnt before. However, I will try to learn them and implement them. Thank you! — FlamingNinja925, May 12 '21 at 15:14
If you hover over the down arrow, it lists the reasons for downvoting. — Heretic Monkey, May 12 '21 at 15:15

score 1 · Accepted Answer · answered May 12 '21 at 15:14

1

You can do so using :hover tag in CSS.

Example code:

<!DOCTYPE html>
<html>
<head>

<style>
img:hover {
  width: 500px;
  height: 500px;
}
</style>
</head>

<img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg">
<p>When hovering on the image, it will become bigger.</p>

</body>
</html>

You should use a special class for it. There's no way as far as i know to be able to enable this for all linked images.

answered May 12 '21 at 15:14

wreeper

46
6

1

The duplicate question I linked to in my comment shows how to do it for any image; use `transform: scale(2)` instead of setting an absolute width and height. – Heretic Monkey May 12 '21 at 15:19

Is there a way where I can enlarge any texts/pictures with the link tag, , using only HTML/CSS?

1 Answers1