Background color to shrink into the border and the text inside it to grow upon hovering on it-CodePudding

I am new to css and html, I created the following code:

Demo:

body {
  background-color: powderblue;
}

#box {
  border: 10px dashed;
  black;
  font-size: smaller;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  background: orchid;
  background-clip: border-box;
}

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" href="stack_css/stack.css">

</head>

<body>

  <h1 style="text-align: center;">Lorem ipsum dolor sit amet</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <div id="box">
    <p>Lorem Ipsum Doler Amet.</p>
  </div>

  </div>

</body>

</html>

I want the background-color inside the border to shrink inside the border and the text inside it to grow to larger when the <div> is on hover. I tried using @keyframes and animations but it didn't work. Any help is appreciated and sorry if my question is stupid or irrelevant, I am open to suggestions.

CodePudding user response：

I used css transitions to increase the font-size of the text and to set the border-clip attribute to padding-box:

body {
  background-color: powderblue;
}

#box {
  border: 10px dashed black;
  font-size: smaller;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  background: orchid;
  background-clip: border-box;  
  transition: background-clip 3s, font-size 2s;
  transition-timing-function: ease-in;
}

#box:hover {
  background-clip: padding-box;
  font-size: larger;
}

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="stack_css/stack.css">

</head>
<body>

<h1 style="text-align: center;">Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="box">
  <p>Lorem Ipsum Doler Amet.</p>
</div>

</div>

</body>
</html>

Explanation:-

I created css transitions to do the required changes upon hovering on the <div> element which has the Id #box

The background-clip property defines how far the background-color(or even image) should extend within an element. The padding-box value sets the background to extend to the inside edge of the border.

For more information: CSS_Background-Clip and CSS_Transitions