【发布时间】：2021-05-05 04:23:18
【问题描述】：
我不知道如何通过href 对图像进行悬停效果来解决此问题。 所以我做了两种不同的代码。在第一张图片中，悬停效果与框的大小完美匹配：
第二张图没有。 （在代码中第一张设置为图片背景，第二张设置为图片）
另外，如果我调整屏幕（手机屏幕）的大小，第一张图片的大小会变得很小。
有人可以帮我处理这段代码吗？我只需要一个示例，因此我可以对其他 a href 图像执行相同的操作。
这是代码：
body {
margin: 0;
}
img {
width: 100%;
height: auto;
}
.gallery {
margin: 0 0.65rem;
}
.gallery-item {
height: auto;
margin: 0.5rem;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 640px) {
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 300px);
grid-auto-flow: row dense;
}
.gallery-item:first-child {
grid-column: 1/4;
grid-row: span 1;
}
.gallery-item:nth-child(2),
.gallery-item:nth-child(3),
.gallery-item:nth-child(4) {}
.gallery-item:nth-child(5),
.gallery-item:nth-child(6) {
grid-column: 1/2;
border: 6px solid #333;
}
.gallery-item:nth-child(7) {
grid-column: 2/3;
grid-row: 3/5;
}
.gallery-item:nth-child(10) {
grid-column: 1/3;
}
.gallery-item:nth-child(11),
.gallery-item:nth-child(13) {
border: 6px solid #333;
}
}
@media (min-width: 960px) {
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, auto);
}
.gallery-item:first-child {
grid-column: 1/4;
grid-row: span 1;
}
.gallery-item:nth-child(2),
.gallery-item:nth-child(3),
.gallery-item:nth-child(4) {}
.gallery-item:nth-child(5),
.gallery-item:nth-child(6) {
grid-column: 1/2;
border: 6px solid #333;
}
.gallery-item:nth-child(7) {
grid-column: 2/3;
grid-row: 3/5;
}
.gallery-item:nth-child(10) {
grid-column: 1/3;
}
.gallery-item:nth-child(11),
.gallery-item:nth-child(13) {
border: 6px solid #333;
}
}
.product-1 {
background-image: url("https://cdn.shopify.com/s/files/1/0425/9040/4758/products/VK_SS21-14280robeshama_600x.jpg?v=1607788637");
}
.middle {
top: 50%;
left: 50%;
text-align: center;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery-item a {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.gallery-item a i {
color: rgba(255, 255, 255, 0.6);
font-size: 3rem;
z-index: 100;
padding: 1rem 1rem;
border: 2px solid rgba(255, 255, 255, .6);
border-radius: .4rem;
opacity: 0;
transition: opacity .5s;
}
.gallery-item a::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .8);
opacity: 0;
transition: opacity .5s;
}
.gallery-item a:hover i,
.gallery-item a:hover::before {
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Image Gallery </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<div class="gallery-item"><img src="https://i.postimg.cc/dtRS4K2L/brigitte-bardot-1-800x400.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/q7j09Dt0/schermata-2020-09-09-alle-18-35-19-1599669344.png"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/j5DN1qbT/4e3f95459e0ea75731c812c6bb5b2b98.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/2ySS4ZNn/okok.jpg" style="object-fit: contain"></div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/dresses/products/shama-white-dress" class="product-1">
<i class="middle">
<div class="text">Discover More</div>
</i>
</a>
</div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/dresses/products/short-boho-rich-dress">
<img src="https://cdn.shopify.com/s/files/1/0425/9040/4758/products/Schermata2021-04-19alle12.14.07_600x.png?v=1618827354">
<i class="middle">
<div class="text">Discover More</div>
</i>
</a>
</div>
<div class="gallery-item"><img src="https://i.postimg.cc/kgSp097x/7af20cc13f08d23f6b56bbafcba9c894.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/hG6bcQMv/Brigitte-Bardot-beach-robe-red-straw-hat-1960s.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/JhZtHyMG/409debab4e6404f1ba9ccd2a0caf57d5.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/3xWrMtRX/port-saint-tropez-g08oplu.jpg"></div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/sunglasses/products/edith">
<img src="https://cdn.shopify.com/s/files/1/0425/9040/4758/products/PELLE_1-Modifica_600x.jpg?v=1618827011">
</a>
</div>
<div class="gallery-item"><img src="https://i.postimg.cc/7LZvzWXt/A.jpg" style="object-fit: contain"></div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/shoes/products/bubbles-flats">
<img src="https://cdn.shopify.com/s/files/1/0425/9040/4758/products/dhdhdhdh_400x.jpg?v=1618408909">
</a>
</div>
<div class="gallery-item"><img src="https://i.postimg.cc/bN5rw74C/6ac52adef5323f8859c853b6aeae2ebe.jpg"></div>
</div>
</body>
</html>【问题讨论】：
-
因为 img 标签会移动要显示的块。这是一个屏幕 - ibb.co/Y37BNTx。你为什么要把 div 变成 标签？
-
对显示块（.gallery-item a i）使用绝对定位，不要将div包裹在标签中。