Link with image: how to prevent image from moving when hover

HTML & CSS
1

Hi everybody,

This issue is driving me crazy:

I have a few links that contain both an image and text. When I hover over them the image will move and displace some parts of the page.
How can I prevent the image from moving?
(in this case the link is part of a list)

Taking an example from another forum I tried setting a new class:

<li><a href=“xyz”><img src=“xyz.jpg” alt=“xyz” class=“nohover”<h1>xyz</h1></a></li>

and then .nohover { border:none; }

to no avail.

neither does

a img: hover { border: none;}

Anybody can give me a hand with this? Thx all.

2

what is :nohover?

can you post your stylesheet or link to the page.

3

just the class name.

I’m currently designing the site so it’s not on line.

<ul>

<li><a href=“XYZ”><img src=“ABC.jpg” alt=“ABC”<h1>XYZ</h1></a></li>

</ul>

CSS
a:hover {
border: none:
}

or

<ul>

<li><a href=“XYZ”><img src=“ABC.jpg” alt=“ABC” class=“nohover”<h1>XYZ</h1></a></li>

</ul>

CSS

.nohover { border: none;}

Thx

4

You’re missing a >, which I’ve added above and marked in red.

Your code is all messed up and incorrectly nested - you can’t have an <h1> inside an <a>.

I doubt that it’s ever appropriate to have an <h1> inside a list, but even if it was, a better construct would be:
<li><h1><a href=“xyz”><img src=“xyz.jpg” class=“nohover”>xyz</a></h1></li>

When you set a hover class, there shouldn’t be any spaces before or after the colon, eg a:hover. A better way to phrase it would be
img.nohover {border:none;}
That will cover both the natural state and the hover state.

Alternatively, if you want all images inside links to be borderless, you could say
a:hover img {border:none;}

If that doesn’t do the trick, you might need to give us a link to the page so we can see what else is going on.

5

Thx for your help.

Will try it and see if it works out.