将鼠标悬停在网格中的图像上时，将显示文本和按钮。重点是，当窗口缩小时，内容会伸出div。
这是我在训练营中进行的第一个项目的一部分，所以我想将图片的宽度保持为33％（而不是使其响应速度更快，并使用@media将其包装为50％-> 100％），在我跳到真正的RWD部分之前，主要是由于实践原因。
我知道我做错了什么，但我似乎无法找出到底是什么。有什么方法可以防止文本突出？
HTML来了
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Board game</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700%7CRaleway:400,700%26display=swap%26subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<section class="gallery">
<h2 class="section-title">Choose your pick</h2>
<div class="gallery-grid">
<img src="https://listverse.com/wp-content/uploads/2019/12/monopoly.jpg" alt="monopoly" class="gallery-image">
<div class="gallery-middle">
<div class="gallery-text">
Some random Text
</div>
</div>
</div>
<div class="gallery-grid">
<img src="https://listverse.com/wp-content/uploads/2019/12/monopoly.jpg" alt="monopoly" class="gallery-image">
<div class="gallery-middle">
<div class="gallery-text">
Some more and more random Text
</div>
</div>
</div>
<div class="gallery-grid">
<img src="https://listverse.com/wp-content/uploads/2019/12/monopoly.jpg" alt="monopoly" class="gallery-image">
<div class="gallery-middle">
<div class="gallery-text">
Text
</div>
</div>
</div>
<div class="gallery-grid">
<img src="https://7.allegroimg.com/s512/03b26e/2a31184a4aa2b59e685e90c9fca7/Gra-Terraformacja-Marsa-znaczniki-3D-gratis-Stan-opakowania-oryginalne" alt="monopoly" class="gallery-image">
<div class="gallery-middle">
<div class="gallery-text">
<p> Random text </p>
<button class="gallery-btn">More Info</button>
</div>
</div>
</div>
<div class="gallery-grid">
<img src="https://listverse.com/wp-content/uploads/2019/12/monopoly.jpg" alt="monopoly" class="gallery-image">
<div class="gallery-middle">
<div class="gallery-text">
Text
</div>
</div>
</div>
<div class="gallery-grid">
<img src="https://listverse.com/wp-content/uploads/2019/12/monopoly.jpg" alt="monopoly" class="gallery-image">
<div class="gallery-middle">
<div class="gallery-text">
Text
</div>
</div>
</div>
</section>
</div>
</body>
</html>`
和SCSS
$color-main: #fa8231;
$color-light: #f1f2f6;
*, *::before, *::after {
box-sizing: border-box;
}
.gallery-grid {
float: left;
width: 33.33%;
height: auto;
position: relative;
vertical-align: top;
}
.gallery-image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
}
.gallery-middle {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.gallery-text {
color: black;
text-transform: uppercase;
font-weight: 700;
font-size: 100%;
}
.gallery-grid:hover .gallery-image {
opacity: 0.6;
}
.gallery-grid:hover .gallery-middle {
opacity: 1;
}
.row::before,
.row::after {
clear: both;
content: "";
display: table;
}
.gallery-btn {
color: $color-light;
background: $color-main;
border-radius: 10%;
border: none;
vertical-align: baseline;
}
.gallery-btn:hover {
cursor: pointer;
}
.btn:hover {
cursor: pointer;
}
留下到jsfiddle的链接：https://jsfiddle.net/Evenclan/0qh7pawk/15/
尝试玩：
.gallery-text {
color: black;
text-transform: uppercase;
font-weight: 700;
font-size: 100%;
}
喜欢：
.gallery-text {
color: black;
text-transform: uppercase;
font-weight: 700;
font-size: 100%;
overflow: auto;
}
使用这些属性：具有不同值的溢出，伸缩等。也阅读他们的目的。