Site URL: http://capybera-point-sp57.squarespace.com
Password: 1234
Hey guys, I had this hover css code added and it was working perfectly. All of a sudden it stopped. I can't seem to figure out why.
When I go into the edit page and hover over it, it slants, but once I hit done and it's back on the normal view, it doesn't slant.
Here's all the custom code I have added:
header#header.shrink * {
color: black !important;
}
.sqs-svg-icon--list {
a:hover {
opacity: 1 !important;
}
a:hover .sqs-use--icon {
fill: #C3FF5C !important;
}
}
// Slanted Text Effect //
h1:hover {
transform: skewX(-15deg);
transition:transform .3s ease-in-out;
color: #C3FF5C !important;
cursor: default;
}
h1 {
transition:transform .3s ease-in-out;
}
// Spotlight Navigation Style //
.header-nav-list:hover > .header-nav-item {
opacity: 0.5;
}
.header-nav-list:hover > .header-nav-item:hover {
opacity: 1.0;
}
// Spotlight Navigation Folder Style //
.header-nav-folder-content:hover > .header-nav-folder-item {
opacity: 0.5;
}
.header-nav-folder-content:hover > .header-nav-folder-item:hover {
opacity: 1.0;
}
div#block-ee18e72926134564be2b a {
color: black;
transition: background-color .5s;
transition: color .5s;
transition: transform 0.3s !important;
}
div#block-ee18e72926134564be2b a:hover {
color: #4063b3;
background-color: #C3FF5C;
opacity: 1 !important;
transform: scale(1.1) !important;
}
div#block-448c899fbef46c44308f a {
color: black;
transition: background-color .5s;
transition: color .5s;
transition: transform 0.3s !important;
}
div#block-448c899fbef46c44308f a:hover {
color: #4063B3;
background-color: #C3FF5C;
opacity: 1 !important;
transform: scale(1.1) !important;
}
Any help would be greatly appreciated!
May-14-2022 20-00-08.mp4