CSS中彈出圖片效果常用于網站的圖片懸停效果。在用戶將鼠標懸停在圖片上時,圖片會在頁面中彈出,從而提高用戶體驗。
.popup { position: relative; transition: all 0.3s ease; overflow: hidden; } .popup img { width: 100%; height: auto; } .popup:hover img { transform: scale(1.1); } .popup:hover:before { content: ""; position: absolute; top: -10px; bottom: -10px; left: -10px; right: -10px; background: rgba(255, 255, 255, 0.2); z-index: -1; }
以上是一個簡單的彈出圖片效果的CSS代碼。使用popup類設置圖片的位置,并為其設置相對定位。然后為圖片添加寬度和高度屬性并在鼠標懸停事件中添加一個縮放效果。最后,使用:before選擇器在圖像周圍添加一個白色半透明的背景。
通過這種方式可以輕松地在網站中添加漂亮的圖片效果,提升用戶體驗。