[英]Zoom Effect on Hover of Image CSS
我試圖在圖像的懸停上添加縮放效果,我將在下面發布我的代碼:
<asp:TableRow>
<asp:TableCell CssClass="space">
<a href="www.google.com" id="myImage" runat="server">
<img src="Images/myIcon" style="border: none;" alt="my text goes here" /></a>
</asp:TableCell>
CSS:
.space {
padding-bottom: .6em;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
目前,這沒有運行我附加的懸停CSS ...為什么它沒有運行懸停CSS?
.image在您的示例中似乎未定義:
.image:hover img {
嘗試:
.space:hover img
使用scale屬性縮放和過渡動畫
.img:hover
{
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
有關完整的教程,請單擊此處http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.