CSS unhover transition

Question

I know that there are already many questions of this type in here but I couldn't find an answer for my problem. I've got a div with a class and added a transition into the class. If I hover on it, everything works fine but if I unhover, the div just immediately jumps back to its default size. Here's the code:

#text {
            width: 300px;
            height: 150px;
            background-color: lightgray;
            border-radius: 10px;
            margin: auto;
            padding: 5px;
            transition: all 0.1s ease-in;
        }

         #text:hover {
            border-left: 10px groove;
            border-top: 10px groove;
        } 

<div id="text">
        <p>If you want to know how to get started as a web developer, take a look at my youtube channel</p>
    </div>

If someone can help me, I'd really appreciate it.

Answer 1

The border style property is not animatable, so you should animate the border-width property instead. Add the same border to the initial state (un-hovered), except for the width: set it to 0px.

#text {
  width: 300px;
  height: 150px;
  background-color: lightgray;
  border-left: 0px groove;
  border-top: 0px groove;
  border-radius: 10px;
  margin: auto;
  padding: 5px;
  transition: all 0.1s ease-in;
}

#text:hover {
  border-left: 10px groove;
  border-top: 10px groove;
}

<div id="text">
  <p>If you want to know how to get started as a web developer, take a look at my youtube channel</p>
</div>