写一段好看的卡片鼠标移入css动画

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  width: 300px;
  height: 200px;
  background-color: pink;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
}
<p>.card:hover {
transform: scale(1.1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}</p>
<p>.text {
font-size: 24px;
color: white;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}</p>
<p>.card:hover .text {
opacity: 1;
}
</style></p>
</head>
<body>
<div class="card">
  <div class="text">
    <h1>Hey there!</h1>
    <p>This is a beautiful card animation.</p>
  </div>
</div>
</body>
</html>