CODEWITHSUNDEEP
cssimagehoversquarespace
Kalie Isaacs
Kalie Isaacs

Reputation: 1

Image reveal on Hover CSS Squarespace

Currently Have the following CSS in place

 .header-menu-nav-item:nth-child(1)::after {
  content: url(link); /* Set content here */
  position: absolute;
       top: 50!important; /* Adjust vertical positioning */
       right: 3; /* Adjust horizontal positioning */
       width: 5px; /* Adjust width as needed */
       height: 30px; /* Adjust height as needed */
       background-repeat: no-repeat;
       z-index: 1; /* Place the image on top of the content */
       opacity: 0; /* Hide the image initially */
       transition: opacity 0.2s ease-in-out; /* Smooth transition on hover */
}

.header-menu-nav-item:nth-child(1):hover::after {
  opacity: 1; /* Show the image on hover */
}

This affects the first page title in my navigation menu. This issues i'm having is when I adjust top, right, width, or Height nothing happens.

I added the !important and that changed nothing.

Upvotes: 0

Views: 41

Answers (0)

Related Questions