HTML和CSS中的第一个图像弹出问题

发布于 2025-02-11 09:15:55 字数 630 浏览 1 评论 0原文

每个人。当您悬停在它上面时，我对第一张图像有问题。这是代码：

这是HTML：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Happy+Monkey&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

<body>
  <div id="header">
    <h1>Today is Violeta's birthday

原文

everyone. I have a problem with the first image when you hover over it pops down. Here is the code:

Here is the HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Happy+Monkey&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

<body>
  <div id="header">
    <h1>Today is Violeta's birthday ????</h1>
    <img id="bff-img" src="Violeta.jpg">
    <h2 id="bday-age">38 years old</h2>
    <h4 id="bday-date">05.07.2022</h4>
  </div>

  <div class="gift-section">
  <h2 class="gift-title">Here's how happy I am for you today ????</h2>
  <h3 class="gift-hint">(Hover over the gift)</h3>
  <div class="gift-img" id="gift-img-happy"></div>
  </div>

  <div class="gift-section">
    <h2 class="gift-title">This one's for you, my friend ????</h2>
    <div class="gift-img" id="gift-img-cheers"></div>
  </div>

  <div class="gift-section">
    <h2 class="gift-title">How people react when you enter the room ????</h2>
    <div class="gift-img" id="gift-img-hot"></div>
  </div>
  <footer>Copyright © 2022 </footer>
</body>

</html>

Here is the CSS:

body {
    text-align: center;
    font-family: 'Happy Monkey', cursive;
    background: #a2d2ff;
    color: #ffffff;
}

h1, h2, h3, h4, p {
    text-shadow: 0 0 1px black;
}

#bff-img {
    width: 150px;
    border-radius: 50%;
    border: 6px solid #EFB0C9;
    margin-bottom: 10px;
}

#bday-age {
    background: #EFB0C9;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px 0 10px 0;
}

#bday-date {
    margin: 0;
    background: #EFB0C9;
    padding: 5px 10px;
    border-radius: 5px;
}

#header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gift-section {
    margin-top: 50px;
}

.gift-title {
    margin-bottom: 10px;
}

.gift-hint {
    margin-top: 0;
}

.gift-img {
    margin: 20px auto;
    max-width: 400px;
    height: 400px;
    border: 6px solid white;
    border-radius: 10px;
    background-image: url("9k=(1).jpg");
    background-size: cover;
}

#gift-img-happy:hover {
    background-image: url("Happy-birthday-GIF-pics.gif");
    height: 500px;
  width: 500px;
}

#gift-img-hot:hover {
    background-image: url("https://c.tenor.com/2tFwoUv94kcAAAAC/party-the-office.gif");
}

#gift-img-cheers:hover {
    background-image: url("birthday-beerthday.gif");
  height: 400px;
  width: 400px;
}

I hope you help me. If you want see the website and the pop down problem here is a link:

https://moms-birthday.starktrek.repl.co/

Goodbye and have a nice day ???? And if you have a question, I will answer it too.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

意中人 2025-02-18 09:15:55

当您悬停在此时，您正在增加＃gift-img-happy容器的高度和宽度：

.gift-img {
  margin: 20px auto;
  max-width: 400px; /* original width */
  height: 400px; /* original height */
  border: 6px solid white;
  border-radius: 10px;
  background-image: url("9k=(1).jpg");
  background-size: cover;
}

#gift-img-happy:hover {
  background-image: url("Happy-birthday-GIF-pics.gif");
  height: 500px; /* changed height */
  width: 500px; /* changed width */
}

如果您想防止弹出或更好的情况，请将悬停状态的高度和宽度与原始状态相同，给出＃＃＃＃gift-img-happy宽度和高度500px的正常状态;

#gift-img-happy {
  max-width: 500px;
  height: 500px;
  /*...rest of code*/
}

#gift-img-happy:hover {
  background-image: url("Happy-birthday-GIF-pics.gif");
}

You are increasing the height and width of the #gift-img-happy container when you hover on it as such:

.gift-img {
  margin: 20px auto;
  max-width: 400px; /* original width */
  height: 400px; /* original height */
  border: 6px solid white;
  border-radius: 10px;
  background-image: url("9k=(1).jpg");
  background-size: cover;
}

#gift-img-happy:hover {
  background-image: url("Happy-birthday-GIF-pics.gif");
  height: 500px; /* changed height */
  width: 500px; /* changed width */
}

Make the height and width of the :hover state the same as the original if you want to prevent the pop down or better still, give the normal state of #gift-img-happy width and height of 500px;

#gift-img-happy {
  max-width: 500px;
  height: 500px;
  /*...rest of code*/
}

#gift-img-happy:hover {
  background-image: url("Happy-birthday-GIF-pics.gif");
}

回复收藏 0 原文

~没有更多了~