我的網站上的每個頁面上都有以下圖片庫代碼。我想要相同的放大效果，而不是不透明效果，最好使用不同的編碼風格，因為我不想公然復制示例站點的內容。
這是我的代碼，你可以看到它顯示在我的網站上，在排名表下方的圖片庫部分。如何修改它以用類似的放大效果替換不透明效果？
.sketch-wrapper {
margin-top: 30px;
margin-bottom: 30px;
}
div.sketch {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1.5rem;
}
div.sketch__item {
border: solid #f5f5f5;
}
div.sketch__item--1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
div.sketch__item--2 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
@media screen and (max-width: 700px) {
div.sketch {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: calc(45% 1.6em);
}
}
@media screen and (min-width: 700px) {
div.sketch {
display: grid;
flex-wrap: wrap;
margin: 0 auto;
width: calc(65% 1.6em);
}
img.sketch__img:hover {
opacity: 0.5;
}
div.anchor {
text-align: center;
font-size: 14px;
padding: 0 5px;
}
}
.anchor-text {
font-size: 14px;
text-align: center;
}
.sketch img {
display: block;
border: solid;
border-color: #fff;
border-radius: 5px;
height: 100px;
width: 200px;
transition: 0.5s;
object-fit: cover;
} <div class="sketch__item">
<div class="sketch__item--1">
<img src="https://mysticmio.de/wp-content/uploads/2021/04/mysticmio_pagehero-1.jpg" class="sketch__img">
</div>
<div class="anchor">
<div class="anchor-text">
<a href="https://mysticmio.de/tarot/">Online Tarot-Orakel</a>
</div>
</div>
</div>
<div class="sketch__item">
<div class="sketch__item--2">
<img src="https://mysticmio.de/wp-content/uploads/2021/04/lenormand-karten_fp-1.jpg" class="sketch__img">
</div>
<div class="anchor">
<div class="anchor-text">
<a href="https://mysticmio.de/lenormand/">Lenormand online legen</a>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
我跳進你的網站并抓住了這個sketch__item。我添加image-holder了保持影像。
<div class="sketch__item">
<div class="sketch__item--2 image-holder">
<img src="https://mysticmio.de/wp-content/uploads/2021/04/rider-waite-online-1.jpg" data-src="https://mysticmio.de/wp-content/uploads/2021/04/rider-waite-online-1.jpg" class="sketch__img lazy loaded" data-was-processed="true">
</div>
<div class="anchor">
<div class="anchor-text">
<a href="https://mysticmio.de/tarot/rider-waite/">Rider-Waite Kartenlegen</a>
</div>
</div>
</div>
一旦專案被徘徊，影像將規模從1到1.2。（無論如何你都可以玩這個）。將div因為它的調整持有該影像將隱藏影像的溢位。
.sketch__item .image-holder{
overflow: hidden;
}
.sketch__item:hover img{
transform: scale(1.2);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334675.html