css 背景图像悬停效果问题-缩小不适用于右边缘

cu6pst1q 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(127)

你能帮我看看这个吗
我有这个代码：
超文本：

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="header">
      <div class="obrazek"></div>
    </div>
  </body>
</html>

CSS：

.header {
  width: 800px;
  height: 500px;
  background-color: rgb(218, 124, 124);
  overflow: hidden;
  position: relative;
  display: flex;
}

.obrazek {
  display: flex;
  padding: 25px;
  width: 100%;
  background-image: url(https://images.unsplash.com/photo-1667857399206-dc6d15189adc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: top 0.3s ease-out, right 0.3s ease-out, bottom 0.3s ease-out,
    left 0.3s ease-out;
}

.obrazek:hover {
  top: 25px;
  right: 25px;
  bottom: 25px;
  left: 25px;
}

代码编号：Codepen link
我想让这张图片在悬停时变小。它可以工作，但只在顶部、底部和左侧，但右侧保持不变（我的意思是它在右边缘悬停时不会改变位置）。
你知道该怎么补救吗？我做错了什么？
先谢谢你!

css

来源：https://stackoverflow.com/questions/75110323/problem-with-background-image-hover-effect-zoom-out-doesnt-work-for-the-right

1条答案

按热度按时间

t1rydlwq1#

试试这个：

.header {
  width: 800px;
  height: 500px;
  background-color: rgb(218, 124, 124);
  overflow: hidden;
  position: relative;
  display: flex;
}

.obrazek {
  display: flex;
  padding: 25px;
  width: 100%;
  background-image: url(https://images.unsplash.com/photo-1667857399206-dc6d15189adc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
  background-size: cover;
  transition: 0.3s ease-out;
}

.obrazek:hover {
  -ms-transform: scale(0.94, 0.9); /* IE 9 */
  -webkit-transform: scale(0.94, 0.9); /* Safari 3-8 */
  transform: scale(0.94, 0.9); 
}

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="header">
      <div class="obrazek"></div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-01-14

我来回答

css 背景图像悬停效果问题-缩小不适用于右边缘

1条答案

相关问题

热门标签

最新问答