懸停時CSS縮放圖像

我想在懸停時縮放背景圖像。懸停時CSS縮放圖像

下面的代碼不縮放背景圖片。相反，它放大了前面的面板。問題是，我沒有任何img的div標籤。我給身體添加一個類。

.imageNeutral{ 
    background-image: url('../App/Images/nature.jpg'); 
    /*background-attachment: fixed;*/ 
    opacity: 0.8; 
    overflow: auto; 

} 

.imageNeutral{ 
    -webkit-transition: all 3s ease; 
    -moz-transition: all 3s ease; 
    -o-transition: all 3s ease; 
    -ms-transition: all 3s ease; 
    transition: all 3s ease; 
    max-width: 100%; 
} 

.imageNeutral:hover 
    -webkit-transform:scale(1.05); 
    -moz-transform:scale(1.05); 
    -ms-transform:scale(1.05); 
    -o-transform:scale(1.05); 
    transform:scale(1.05); 
}

在JavaScript

：

$("body").addClass('imageNeutral');

所有其他元素放大，而不是圖像。我只想放大圖像。

.imageNeutral img：hover也行不通。

你有什麼想法我做錯了什麼？

來源

2015-11-03 Minas Minas

您是否嘗試搜索此問題？ –

設置背景大小使用background-size正常和徘徊和動畫。

.imageNeutral { 
 
    background: url('http://lorempixel.com/400/400/'); 
 
    -webkit-background-size: 100% auto; 
 
    background-size: 100% auto; 
 
    width: 100%; 
 
    height: 500px; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
} 
 
.imageNeutral:hover { 
 
    -webkit-background-size: 120% auto; 
 
    background-size: 120% auto; 
 
}

<body class="imageNeutral"></body>

編輯：更改標籤，以匹配提供的。

來源

2015-11-03 08:50:16 Justas

我不能使用div標籤，因爲我有許多ng-views，並且我更改了指令 –

中的背景圖片我已經更新了標籤以符合您的要求。 – Justas

感謝您的帖子。 –

-1

製作兩個背景圖像 - 正常和縮放關於懸停更改背景圖像。這應該工作。

來源

2015-11-03 08:45:24

懸停時CSS縮放圖像

回答

相關問題