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

Questions

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

November 12, 2022

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.

>Solution :

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