you should add this rule:
nav .logobg {
left: 50%;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
So when mouse leave the element it should apply the transition you defined that overrides the :hover rule.
Lety has a solid answer but I thought I would elaborate on my comment earlier. So I had the right idea just wrong placement. I moved .logobg up above nav:hover .logobg and added your duration and timing to .logobg. It now transitions smoothly back and forth.
body {
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav {
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
.logobg {
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
nav:hover .logobg {
left: 0;
transform: translateX(0);
}
.navtext {
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo {
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.navelements {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover {
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221, 16, 247, 1) 0%, rgba(0, 212, 255, 1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}<nav>
<a href="index.html">
<div class="logobg">
<div class="logo">
AI
</div>
</div>
</a>
<a href="blank.html">
<div class="">
</div>
</a>
</nav>
<div class="navbarline"></div>CSS transitions reverse once the “hover” event stops. Here’s a way to do it with javascript.
I’m adding an “id” with the styling that you require. An id’s css will always override that of a class, which is why this works.
The javascript:
const nav = document.querySelector("nav");
const logobg = document.querySelector(".logobg");
nav.addEventListener("mouseover", () => {
logobg.setAttribute("id", "move");
})
The css:
body{
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav{
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
#move {
left: 0;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
.navtext{
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo{
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.logobg{
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.navelements{
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover{
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221,16,247,1) 0%, rgba(0,212,255,1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}
I am quite new to html and css, and have started using transitions. I watched Kevin Powell’s video on it, and all his demonstrations had the transition applied when transitioning out (for instance when he stopped hovering on the element). However in my example, the transition works when the logo moves to the left, but instantly teleports back. Why is this, and what have I done wrong?
body {
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav {
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
nav:hover .logobg {
left: 0;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
.navtext {
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo {
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.logobg {
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.navelements {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover {
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221, 16, 247, 1) 0%, rgba(0, 212, 255, 1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}<nav>
<a href="index.html">
<div class="logobg">
<div class="logo">
AI
</div>
</div>
</a>
<a href="blank.html">
<div class="">
</div>
</a>
</nav>
<div class="navbarline"></div>Try moving your transition duration and transition timing function inside your nav style. That way the duration and timing is always applied and the translate is applied on hover. I’ll check back when I get home and I’m not looking at this on my phone.
@KJEK-Code there was no change
Sorry about that… answer is posted below. I had the right idea just put it in the wrong place.
This did not work, the logo transitions to the left and gets stuck there. I do not know about js at all, so can’t debug this. Sorry for my incompetence
Sorry, I don’t fully understand. I thought you didn’t want the logo to move back once the hover stops. Do you want the logo to move left when you hover? What do you want to happen once you stop hovering?
I want it to move to the left while hovering, and move back to the center when not hovering, sorry