Hover Menu and Image code stopped working all of a sudden

Wesite: https://www.adamhyattphotography.com/

So all of my hover coding on my site stopped working today while messing with trying to get a carousel to smoothly autoscroll.  
My menu nav use to change to being darker and so did my social icons.  
Then also my images on hover would change opacity.

Code I had that worked just fine up until today...

/* Nav item color */
.header-nav-item a {
    color: hsl(11, 0%, 50%) !important; 
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: hsl(0, 0%, 0%) !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: hsl(0, 0%, 0%) !important;
}

.header-actions-action.header-actions-action--social a:hover svg {
    fill: black !important;
}

Code for images..

figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before {
    background-color: rgba(255,255,255,.3);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all .8s ease
}

figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before {
    opacity: 1;
    transition: all 330ms ease
}

Did some other code on the page mess with it.  I've tried a million different things to get my client logos to work the way I want with no solution, so wondering if something interfered.

Can you send all current code in CSS box? I think your CSS box has a syntax error.

You can click this icon then paste the code

On 3/8/2024 at 2:31 AM, tuanphan said:

Can you send all current code in CSS box? I think your CSS box has a syntax error.

You can click this icon then paste the code

 

Totally possible.  I've changed so much trying to get that banner to work the way I want without resolution yet.


 

/* Nav item color */
.header-nav-item a {
    color: hsl(11, 0%, 50%) !important; 
}

/* Nav item hover color */
.header-nav-item a:hover {
    color: hsl(0, 0%, 0%) !important;
}

/* Nav item active color */
.header-nav-item--active a {
    color: hsl(0, 0%, 0%) !important;
}

.header-actions-action.header-actions-action--social a:hover svg {
    fill: black !important;
}

.form-wrapper .field-list .field {
    position: relative;
    margin: -10px 0px 15px;
}

.sqs-block-content hr {
 margin-top: -25px !important;
}

.sqs-block-horizontalrule {
 margin-bottom: -35px !important;
}

.header-layout-nav-center .header-nav {
    flex: 40% !important;
    width: 60% !important;
}

@media screen and (min-width: 990px){
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 0 0 100%;}

/* remove current icon */
.header-actions-action--social a:last-child svg {
    display: none;
}
  
/* set new icon */
.header-actions-action--social a:last-child {
    background-image: url(https://static1.squarespace.com/static/5e48bac3e8cf6318cdae0fb7/t/5ea5ff06cffe7b1a439472bc/1587937035935/lock-logo-test.png?format=300w);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
  
.figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before {
    background-color: rgba(255,255,255,.3);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all .8s ease
}

.figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before {
    opacity: 1;
    transition: all 330ms ease
}
  
.gallery-reel-wrapper   {
overflow: hidden; 
}

/* list height */
div.user-items-list {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}  
  
#page {
overflow-x: hidden
}

.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 50s inear infinite
}

.gallery-grid-wrapper .gallery-grid-item {
 min-width: 15%;
 margin-right: 1%
}

@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -550% }
  }
  
.slider {
  width: 100%;
  overflow: hidden;
}

.slider .slider-image {
  background-image: 
url(https://static1.squarespace.com/static/5e48bac3e8cf6318cdae0fb7/t/65e6b16bba5e27001936631d/1709617516018/CLIENT+LOGO+BANNER.png);
  width: auto;
  height: 200px;
  background-size: 2950px 200px;
  animation: slide 60s linear infinite;
}

@keyframes slide {
  from {background-position-x: 0px;}
  to {background-position-x: -2950px;}
}
  
  @media screen and (max-width:767px) {
.user-items-list-item-containersection[data-section-id="65dac7c9f3365648bc920997"] ul {
    grid-template-columns: repeat(2,1fr) !important;
}

Need 2 }}

need 2 }}

15 hours ago, tuanphan said:

Need 2 }}

need 2 }}

OK, Awesome, that fixed the hover of the menu items.   Thank you for that!

But the hover over image opacity still isn't working as before.  See anything that may have messed that up trying to figure out the banner thing in my other thread?

Remove 2 dots here

Amazing.  thank you!