如何使用 CSS 為背景圖像創建放大效果？

Question

我有一個靈活的列表項設置來顯示信息。 我有一個附加到這些列表項的背景圖像，但我想在鼠標懸停或聚焦時創建放大效果。 我想我部分是在那里，但是我目前的設置使得它們在移動屏幕上展開。 我想知道是否有一種方法可以實現我正在嘗試做的響應。

我搜索過類似的帖子，發現很多人都在使用 overflow: hidden; 使用變換比例，我似乎無法讓它與 flex 一起使用。 任何幫助將不勝感激！

 body { font-family: sans-serif; } h2 { color: #3CAD5D; padding-bottom: 0px; margin-bottom: 0px; } ul { margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; max-width: 1500px; width: 100%; } li { display: flex; width: calc(33.333333% - 10px); } a { flex-grow: 1; box-sizing: border-box; text-decoration: none; color: #000; box-shadow: 3px 3px 5px #888888; padding: 20px; } a:hover { color: #fff; } /*** MEDIA QUERIES ***/ @media screen and (max-width: 800px) { ul { flex-direction: column; /* change direction of flex for mobile */ margin: 0 auto; } li { width: 97%; } } /*** BG WITH ZOOM ***/ .bg1 { background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781'); margin: 5px; } .bg2 { background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg'); margin: 5px; } .bg3 { background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg'); margin: 5px; } .bg1, .bg2, .bg3 { background-size: 100% 100%; background-repeat: no-repeat; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .bg1:hover, .bg2:hover, .bg3:hover { background-size: 130% 130%; }

 <ul> <li class="bg1"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </li> <li class="bg2"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </li> <li class="bg3"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </li> <li class="bg1"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </li> <li class="bg2"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </li> <li class="bg3"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </li> </ul>

Answer 1

更新

對於前 3 個圖像：為每個<li>添加一個<div>然后從<li>刪除.bg* .classes 並將它們交給新的內部<div> 。 然后將overflow:hidden添加到<li> 。

---

向*:hover規則集添加了transform: scale(1.3 ) 。 將background-size:100% 100%更改為background-size:cover

演示

 body { font-family: sans-serif; } h2 { color: #3CAD5D; padding-bottom: 0px; margin-bottom: 0px; } ul { margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; max-width: 1500px; width: 100%; } li { display: flex; width: calc(33.333333% - 10px); overflow: hidden; } a { flex-grow: 1; box-sizing: border-box; text-decoration: none; color: #000; box-shadow: 3px 3px 5px #888888; padding: 20px; } a:hover { color: #fff; } /*** MEDIA QUERIES ***/ @media screen and (max-width: 800px) { ul { flex-direction: column; /* change direction of flex for mobile */ margin: 0 auto; } li { width: 97%; } } /*** BG WITH ZOOM ***/ .bg1 { background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781'); margin: 5px; } .bg2 { background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg'); margin: 5px; } .bg3 { background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg'); margin: 5px; } .bg1, .bg2, .bg3 { background-size: cover; /* Changed to cover */ background-repeat: no-repeat; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .bg1:hover, .bg2:hover, .bg3:hover { transform: scale(1.3); /* Changed to transform:scale() */ }

 <ul> <li> <div class="bg1"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </div> </li> <li> <div class="bg2"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </div> </li> <li> <div class="bg3"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </div> </li> <li class="bg1"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </li> <li class="bg2"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </li> <li class="bg3"> <a href="#"> <h2>References</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a> </li> </ul>