Trying to put a hover effect under a text

HTML-CSS
1

Hello, I’m currently trying to put a small image as a hover effect under a text in my navigation bar. However, I encountered a problem where only part of the image is shown when hovering over the text in the navigation bar. Can anyone tell me why this is happening? I’ve been trying to fix it for the past hour but can’t seem to find the right solution, I have tried increasing the padding , width of the function but still did not help the issue.

It seem like the hover works but there just isn’t enough space for it to show the full image when hovering over it. Is there anyway I could show the full image when hovering over the text?

The HTML code:

					<nav>
						<ul>
							<li><a href="main.html"><i class="fa fa-home padicon"></i>&nbsp;Home</a></li>
							<li><a href="profile.html"><i class="fas fa-store"></i>&nbsp;Shop</a></li>	
							<div class="alignright">
								<li><a href="login.html"><i class="fas fa-user-circle"></i>&nbsp;Account</a></li>
							</div>
						</ul>
					</nav>

The CSS code:

nav {
  overflow: hidden;
  padding-left: 50px;
  padding-top: 15px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: center;
}

nav li {
  display: inline-block;
  margin-left: 10px;
  height: 50px;
  line-height: 70px;
  transition: 0.5s linear;
  font-size:120%;
}
nav a {
  text-decoration: none;
  font-weight: 500;
  color: #8cc540;
}

nav a:hover {
	display: block;
	background-image: url("pointer.png");    **(this is the image im trying to show when hovering over the text)**
	background-repeat:no-repeat;
	background-position: 15px 45px;
	background-size: 25px 25px;
}

How it looks like currently and as you can see, the image (a carrot) is halved.
image
2

Anyone has any ideas?

3

try object-fit: cover; on the hover

or a few other to try

The object-fit property can have the following values:

  • fill - This is default. The replaced content is sized to fill the element’s content box. If necessary, the object will be stretched or squished to fit
  • contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box
  • cover - The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. The object will be clipped to fit
  • none - The replaced content is not resized
  • scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)
1 Like
4

Maybe you have wrong background-position.
I make it in codepen like this
https://codepen.io/padunk/pen/oNXeaGL?editors=1100
Hope that help.

1 Like
5

Hi, thank you for your response.

This does work however I want the image to display fully under the text not behind the text.

6

This did not work for me, thank you for your response still!

1 Like
7

You either need to make your a element take up the full height of its parent li element. Or, you should change the hover effect to affect the li element:

nav li:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACKCAMAAABCWSJWAAABDlBMV…2CbLamambXINbyA3T5bIcecbTQM+B0Z+XrV3u688xY+h+qz7rGk88HnwAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: bottom;
}

It will not appear properly, until you resize the navbar, because it is too small for the carrot to appear below the text.

Hope this helps

1 Like
8

Thank you so much, this helped me kinda figure it out. I first like you suggested change the hover to “nav li:hover” then also adjust the height for “nav li” to higher so that the full image can be displayed below the text.

Thank you everyone for their input. Really appreciate it!

image