如何使用 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>