Question 264808 in Html Question posted in
Some basic documentation can be found here.

Why is box not wrapping image element properly in html?

Hello – new to html and learning CSS as I go so I’m sure this is an obvious error. Looking for a simple fix. Essentially I have written very simple CSS so that a box surrounds links when hovering – this works great for text links so far.

a:hover {
    color: rgb(203, 173, 126); 
    border: 1px solid rgb(203, 173, 126);
    padding: 2px;
}

But if I am using an image to link things get tricky. By default the box just highlights the bottom of the image, ignoring the borders altogether. I know this has something to do with display: inline-block, but when I write that into the style then when hovering over the image the box wraps correctly around the top and bottom margins, but stretches all the way to the left and right side of the page.

<a href="youtube.com" style="display: inline-block;">
    <img src="image.png" width="30%" height="30%">
</a>

I found a forum (here) where it looks like someone else was having the exact same problem but I cannot see how they ultimately fixed it, even as I have tried to go through their responses. Wondering if someone could help me for my case!

Tags:

2

Answers


  1. 0

    I don’t know if my answer is correct but try to hover on the image not the anchor tag it should cover the img

    Login or Signup to reply.
  2. 0

    You need to check whether where the animation will take effect.

    Applying hover to the parent will apply also to it’s child, so you need to consider it.

    span:hover, img:hover {
    color: rgb(203, 173, 126);
    border: 1px solid rgb(203, 173, 126);
    padding: 2px;
}
    <div>
  <a href="youtube.com">
    <img src="https://picsum.photos/id/237/200/300" width="30%" height="30%">
  </a>
</div>
<div>
  <a href="#">
    <span>THIS TEXT IS A LINK.</span>
  </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search