I'm working on a company website and my website design knowledge is very basic. I challenged myself to add interactive elements.
1. My navigation bar has hover animations.
2. My slide show is automatic and also manual.
However when I added my slide animations, any previous animation I had added was overrided and doesn't work anymore. When I hover over my nav bar, the mouse doesn't even realise there is a link there and so no animations appear. Any help is greatly appreciated:(
This is my CSS
.containerhead {
margin-left: auto;
margin-right: auto;
width: 1024px;
}
header {
height: 110px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding-top: 0px;
padding-bottom: 20px ;
}
nav{
background-color: rgba(0, 0, 0, 0);
height: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
nav a {
padding-left: 20px;
padding-right: 50px;
color: black;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
position: relative;
letter-spacing: -0.5px;
transition-duration: 450ms;
font-size: 13.5px;
font-weight:bolder
}
nav a:after {
content: "";
position: absolute;
background-color: rgba(243, 211, 104, 0.644);
height: 1.5px;
width: 0;
left: 0;
bottom: -0.6px;
transition-duration: 450ms;
}
nav a:hover {
color: rgb(90, 90, 90);
}
nav a:hover:after {
width: 40px;
left: 19px;
}
.containerbody {
margin: 0;
padding:0;
padding-top: 190px;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
background: rgb(255, 255, 255);
}
.slider {
width: 1240px;
height: 800px;
border-radius: 0px;
overflow: hidden;
}
.slides {
width: 500%;
height: 800px;
display: flex;
}
.slides input {
display: none;
}
.slide {
width: 20%;
transition: 2s;
}
.slide img {
width: 1240px;
height: 600px;
}
.navigation-manual {
position: absolute;
width: 1240px;
margin-top: -230px;
padding-bottom: 400px;
display: flex;
justify-content: center;
}
.manual-btn{
border: 1px solid #ffffff;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child) {
margin-right: 40px;
}
.manual-btn:hover {
background: white;
}
#radio1:checked ~ .first {
margin-left: 0;
background-color: #ffffff;
}
#radio2:checked ~ .first {
margin-left: -20%;
background-color: #ffffff;
}
#radio3:checked ~ .first {
margin-left: -40%;
background-color: #ffffff;
}
#radio4:checked ~ .first {
margin-left: -60%;
background-color: #ffffff;
}
.navigation-auto {
position: absolute;
display: flex;
width: 1240px;
justify-content: center;
margin-top: -230px;
padding-bottom: 400px;;
}
.navigation-auto div {
border: 2px solid rgb(235, 216, 141);
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child){
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
background-color: #ffffff;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
background-color: #ffffff;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
background-color: #ffffff;
}
#radio4:checked ~ .navigation-auto .auto-btn{
background-color: #ffffff;
}
What I have tried:
Nothing, im completely lost....
I tried removing the javascript from the html but the animations still didn't return so I haven't attached the html.