0

I am making a website in which a page needs a hoverbox with cool animations. I quickly wrote the code. But the transition is not working like it should have. It is only working from normal to :hover, not :hover to normal. As soon as I move my mouse somewhere else, my div returns to its normal state without any animations. Does anyone have a solution for this?

Here are my HTML and CSS files -

HTML -

<html>
<head>
    <title> Rubik's Point | Home </title>
    <link rel = "stylesheet" href = "Styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,700;1,300&display=swap" rel="stylesheet">
</head>

<body>
    <div class = "header">
        <div class = "logo">
            <h1 class = "specialTitle"><a href = "Home.html"> RUBIK'S POINT </a> </h1>
        </div>
        
        <div class = "navContainer">
            <ul>
                <li><b><a href = "Home.html"> Home </a></b></li>
                <li><b><a href = "Tutorials.html" id = "currentPage"> Tutorials </a></b></li>
                <li><b><a href = ""> Give Us a Feedback </a></b></li>
                <li><b><a href = ""> Contact Us </a></b></li>
            </ul>
        </div>
    </div>
    
    <div class = "intro">
        <div class = "introTextbox">
            <h1> Become a Cube Master </h1> 
            <h3> In this section, you will find many tutorials which will teach you how to solve different types of cube puzzles. </h3>
        </div>
    </div>
    
    <div class = "mainContent">
        <center> <h1> Here are some Popular Tutorials </h1> </center>
        
        <div class = "hoverContainer">
            <div class = "hoverbox">
                <img src = "F:\Rubiks Point\Images\Tutorials\cube background.jpg" width = "100%" height = "100%"></img>
            </div>
            
            <div class = "hoverbox">
                <img src = "F:\Rubiks Point\Images\Tutorials\fast solve 2.jpg"></img>
            </div>
        </div>
    </div>  
    
    <div class = "footer">
        <div class = "colfooter">
            <p> <a href = ""> Give Us a Feedback > </a> </p> 
            <p> <a href = ""> Learn to Solve the Rubik's Cube > </a> </p> 
            <p> <a href = ""> Learn to Solve the Rubik's Cube Faster > </a> </p>
        </div>
        
        <div class = "colfooter">
            <p> <a href = ""> Contact Us > </a> </p> 
            <p> <a href = ""> Learn Conventional Algorithms > </a> </p>
        </div>
    </div>
</body>
</html>

CSS -

* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
font-family: 'Mulish', sans-serif;
}

.header {
width: 100%;
height: 75px;
background-color: #222222;
color: white;
line-height: 75px;
padding-left: 50px;
padding-right: 100px;
overflow-y: hidden;
position: fixed;
}

.logo {
width: 30%;
float: left;
font-family: "Lulo Clean";
}

.logo a {
text-decoration: none;
color: white;
}

.navContainer {
width: 70%;
list-style-type: none;
float: right;
text-align: right;
}

.navContainer li {
display: inline-block;
padding-left: 50px;
font-size: 20;
}

.navContainer a {
text-decoration: none;
color: white;
}

.navContainer a:hover {
color: orange;
}

.intro {
width: 100%;
height: 850px;
background-color: gray;
color: white;
line-height: 850px;
text-align: right;
background-image: url("F:/Rubiks Point/Images/cube background.jpg");
}

.introTextbox { 
width: 40%;
height: 100%;
float: right;
text-align: center;
line-height: 50px;
padding-top: 400px;
margin-right: 100px;
font-size: 20;
font-family: 'Mulish', sans-serif;
}

.mainContent {
width: 100%;
padding-left: 200px;
padding-right: 200px;
padding-top: 50px;
padding-bottom: 75px;
background-color: white;
}

.footer {
width: 100%;
height: 230px;
padding-left: 340px;
padding-right: 440px;
padding-top: 55px;
padding-bottom: 60px;
background-color: #222222;
color: white;
display: flex;
}

.row1 {
display: flex;
padding-top: 125px;
padding-bottom: 50px;
padding-right: 50px;
}

.row2 {
display: flex;
padding-top: 75px;
padding-left: 150px;
padding-right: 200px;
}

.col {
width: 330px;
margin-left: 50px;
text-align: center;
}

.col p {
margin-top: 30px;
}

.colfooter {    
padding-left: 100px;
}

.colfooter a {  
color: white;
}

.colfooter p {
padding-top: 15px;
}

.specialTitle {
letter-spacing: 10px;
}

.hoverContainer {
width: 100%;
height: 375px;
margin-top: 75px;
display: flex;
}

.hoverbox {
width: 30%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
border-radius: 20px;
text-align: center;
}

.hoverbox img {
width: 100%;
height: 100%;
}

.hoverbox:hover img {
border-radius: 50%;
width: 25%;
height: 25%;
transition: 0.5s ease;
}

#currentPage {
color: orange;
}

Thanks a lot in advanced!

Johannes
  • 64,305
  • 18
  • 73
  • 130
Nandan Goyal
  • 27
  • 4

1 Answers1

4

Move the transition: 0.5s ease; setting out of the .hoverbox:hover img rule and put it into the .hoverbox img rule - it needs to be in the default state, not in the hover state.

Johannes
  • 64,305
  • 18
  • 73
  • 130