Menu
I am working with this, probably simple solution, but I couldn't find any help on stackoverflow or the internet relating to this specific problem.
I have a menu, and I want to make an image appear under the link or close by when you hover over it. I 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 the CSS so far:
a:hover
{
background-image: url('image/circle.PNG');
background-repeat: no-repeat;
}
Hope you guys can help me!
502
Answer: Use the CSS background-image property You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
To display the element on hover, make them invisible by default using display: none property. Then add :hover property on that element with display: block to make it visible on hover.
Usage is simple — you insert the path to the image you want to include in your page inside the brackets of url() , for example: background-image: url('images/my-image. png'); Note about formatting: The quotes around the URL can be either single or double quotes, and they are optional.
The clean way to deal with it is to use :after pseudo element
a:hover:after {
content: url(image/circle.PNG); /* no need for qoutes */
display: block;
}
You don't even need the image to be present in the DOM.
Also remember that the path to the image will be relative to the CSS file, not the HTML file.
Of course, the image will push down the content below 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 */
}
Try putting the image within the href and giving a style of 'display: none'
Then:
a:hover img{ display: block; }
That should display the image when hovering on the
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
