將鼠標懸停在圖像上時顯示放大的圖片

在我的網頁上，我想放置一個圖像，當鼠標指針懸停在該圖像上時，會出現放大版本。基於意見的要求進一步解釋將鼠標懸停在圖像上時顯示放大的圖片

來源

2013-08-27 alancc

所有你需要做的就是創建一個鼠標經過圖像，並且在鼠標的位置是在圖像的任意位置，設置圖像的到但是大的框架你想要它。 – user2277872

更新CSS解決方案

在原有基礎上的問題

CSS解決方案

http://jsfiddle.net/ERh62/1/

http://jsfiddle.net/5sRTX/7/

<div class="effectback"> 
<img class="effectfront" src="https://farm8.staticflickr.com/7042/6873010155_d4160a32a2.jpg" /> 
</div> 

attribution<br/> 
https://secure.flickr.com/photos/[email protected]/6873010155/sizes/m/in/photostream/ 

.effectback { 
    display: block; 
    background: url('https://farm8.staticflickr.com/7042/6873010155_d4160a32a2_s.jpg') no-repeat; 
    margin: 0 auto; 
} 
.effectfront { 
    opacity: 0; 
    border: none; 
    margin: 0 auto; 
} 
.effectfront:hover { 
    opacity: 1; 
    transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
}

原始的CSS解決方案

.effectscale { 
    border: none; 
    margin: 0 auto; 
} 
.effectscale:hover { 
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
    -o-transform: scale(1.2); 
    transform: scale(1.2); 
    transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
}

來源

2013-08-27 02:57:00 Anton

謝謝。但是，我所擁有的是兩張圖像，一張圖像的分辨率較低，另一張圖像的分辨率較高。我想將較低分辨率的圖像放入頁面中，然後當用戶的鼠標懸停在圖像上時，會顯示高分辨率版本。如何做到這一點。 – alancc

已更新小提琴根據您的評論添加答案 – Anton

非常感謝。這看起來非常好。有沒有辦法讓大彈出式圖像與小圖像位於同一中心？ – alancc

<img src="..." onmouseover="this.width='someWidth'; this.height='someHeight'" onmouseout="this.width='originalWidth'; this.height='originalHeight'">

來源

2013-08-27 02:57:13 Cruncher

就試試這個：

<html> 
<head> 
<style> 
    .container{ 
     overflow:hidden; 
     width:300px;/*change this to whatever you want*/ 
     height:150px;/*change this to whatever you want*/ 

     /*Of course, to get the desired effect, the size of the image "<img>" below must be larger than the size mentioned above*/ 
    } 

    .container:hover{ 
     overflow:visible 
    } 
</style> 

</head> 
<body> 
    <div class='container'><img src='myImage.png'/></div> 
</body> 

</html>

來源

2016-09-19 18:21:17 yacine

爲什麼不使用相同的百分比而不是固定像素？固定寬度和高度傾向於在您使用可變圖像/尺寸時立即創建扭曲的圖像。 – SaschaM78

將鼠標懸停在圖像上時顯示放大的圖片

回答

相關問題