背景圖像 hover 效果問題 - 縮小對右邊緣不起作用

Question

你能不能看看這個？

我有這段代碼：

HTML：

<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;
}

代碼筆：代碼筆鏈接

我希望這張圖片在 hover 上變小。它正在工作，但僅適用於頂部、底部和左側，但右側保持不變（我的意思是它不會在右側邊緣的 hover 上更改其 position）。

您是否知道如何解決這個問題以及我做錯了什么？

先感謝您！

Answer 1

嘗試這個：

 .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>

背景圖像 hover 效果問題 - 縮小對右邊緣不起作用

問題描述

1 個解決方案

解決方案1
0 2023-01-13 14:22:04

背景圖像 hover 效果問題 - 縮小對右邊緣不起作用

問題描述

1 個解決方案

解決方案1 0 2023-01-13 14:22:04

解決方案1
0 2023-01-13 14:22:04