0
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Transitions</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
   <div>hi potter
      <p>Hi Prajith.</p>
   </div>
</body>

p
{
    display: none;
    padding: 20px;
    transition-duration: 2s;
}


div:hover p
{

    display: block;
}

in this code the is like to display the p when the div is hovered and want it smooth to happen to I place a transition duration but does not work can anyone give the solution

SouLRegaltoS
  • 1
  • 2

1 Answers1

1

You cannot transition the display property. You would need to use opacity to achieve that effect.

p {
  padding: 20px;
  opacity: 0;
  transition: opacity 2s linear;
}

div:hover p {
  opacity: 1;
}
<div>hi potter
  <p>Hi Prajith.</p>
</div>
abney317
  • 7,760
  • 6
  • 32
  • 56