Geek Answers Handbook

Make image in hover css window

I am working with this, probably a simple solution, but I could not find any help on stackoverflow or on the Internet related to this particular problem.

I have a menu, and I want the image to appear under or next to the link when you hover over it. Hope this can be done in CSS. This is my code so far.

HTML

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="startpage.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div id="wrapper"> <img id="baggrund" width="166" height="327" alt="back image" src="images/laerkeryg.jpg"/> <img id="cirkler" width="319" height="249" alt="circles" src="images/circles.PNG"/> <div id="header">/jacob gerlif pilegaard/</div> <div id="underheader">portfolio</div> <ul> <li><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="gallery.html">gallery</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> <img id="menucircle" width="50" height="50" alt="menu circle" src="images/circle.PNG"/> </body> </html>

And this is CSS:

 a:hover { background-image: url('image/circle.PNG'); background-repeat: no-repeat; }

Hope you guys can help me!

+8
css image hyperlink hover
source share
3 answers

A clean way to deal with it is to use the alias :after

 a:hover:after { content: url(image/circle.PNG); /* no need for qoutes */ display: block; }

You do not even need the image to be present in the DOM.
Also remember that the path to the image will refer to the CSS file, not the HTML file.

Of course, the image will crowd out the content under the anchor. To avoid this, you can try:

 a:hover { position: relative; } a:hover:after { content: url(image/circle.PNG); /* no need for qoutes */ display: block; position: absolute; left: 123px; /* change this value to one that suits you */ top: 56px; /* change this value to one that suits you */ }
+20
source share

Try putting the image in href and giving the style "display: none"

Then:

 a:hover img{ display: block; }

This should display the image when you hover over

+3
source share

For the background image, you need to assign the width, height (or the corresponding pad) to the snap and display it as a block.

 a:hover { background-image: url('image/circle.PNG'); background-repeat: no-repeat; background-position: center bottom; height:20px width:100px; display:block; }
0
source share

More articles:


All Articles