使用 HTML 和 CSS 建立翻譯懸停效果

在現代網頁設計中，創造視覺吸引力和互動體驗是吸引使用者興趣的關鍵。實現這一目標的最有效方法之一是透過懸停效果，當使用者與頁面上的元素互動時，它會提供即時回饋。

什麼是翻譯懸停效果？
平移懸停效果涉及當使用者將滑鼠懸停在元素上時沿 X 或 Y 軸移動元素。這種效果給人一種元素正在移動或浮動的錯覺，提供更具互動性和回應性的使用者體驗。

輸出-

HTML-

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Translate Hover Effect</title>


  <div class="image-container">
    <img class="hover-image lazy" src="/static/imghwm/default1.png" data-src="image1.jpg" alt="Image 1">
    <img class="hover-image lazy" src="/static/imghwm/default1.png" data-src="image2.jpg" alt="Image 2">
    <img class="hover-image lazy" src="/static/imghwm/default1.png" data-src="image3.jpg" alt="Image 3">
  </div>

CSS-

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.image-container {
  display: flex;
  gap: 20px;
  max-width: 1000px;
    flex-wrap:wrap;
}

.hover-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.hover-image:hover {
  transform: translateY(-10px);
}

display: flex;: 顯示：flex;屬性用於建立靈活的容器。此屬性可以輕鬆建立靈活且響應式的佈局結構，而無需浮動或定位。

展示的好處：flex； :

• 水平和垂直項目的簡單對齊選項。
• 自訂事物的視覺順序而不影響 HTML 結構。
• 靈活性：專案可以調整以適應可用區域，從而實現響應式設計。
• 沿著主軸（行或列）有效排列項目內的空間。

flex-wrap: 包裹;:

• flex-wrap：包裹；屬性，與 display: flex; 結合使用，控制 flex 物件如何跨多行換行。 (閱讀更多)

flex-wrap 的好處：wrap;

• 響應式設計：當一行上沒有足夠的空間時，允許物件遷移到下一行，這對於響應式佈局至關重要。
• 更好地利用空間：允許事物環繞可以提高空間利用率並防止溢位問題。
• 一致性：無論螢幕大小如何，它都有助於實現統一且有組織的佈局。

閱讀全文 - 點此

結論
翻譯懸停效果是網頁設計工具包中的一個很棒的工具。它實施簡單、重量輕，並且可以為您的網站增添專業氣息。無論您是展示圖像、按鈕還是其他互動元素，這種效果都有助於吸引使用者並增強整體使用者體驗。

以上是使用 HTML 和 CSS 建立翻譯懸停效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！