Question

我在一个网格的4列中有4张图像，我希望它们根据浏览器的大小进行调整。这4张图像在悬停时带有模糊滤镜，在悬停时带有文本。 Wo，we，wa和pool类是列中的单个图像。

我没有做太多尝试，因为我不知道问题从哪里开始，我还是CSS的新手

<div class="images">
<div class="pool">
<h2> Here </h2>
<img src="img/cpu.jpg">
</div>

<div class="we">
<h2> Here </h2>
<img src="img/cubes.jpg">
</div>

<div class="wo">
<h2> Here </h2>
<img src="img/preme.jpg">
</div>

<div class="wa">
<h2> Here </h2>
<img src="img/hand.jpg">
</div>
</div>


.images {
display: grid;
grid-template-columns: repeat(4,1fr);
padding: 2rem 3.5rem;
grid-gap: 10px;
position: relative;




}
.images img{
height:9rem;
width:15rem;
padding: 5px;
transition: .3s;

}



.images h2 {
position: absolute;
padding-left: 5.5rem;
padding-top: 3.5rem;
color: white;
justify-content: center;
transition: .3s;
opacity: 0;
z-index: 1;
height: 6rem;
width: 9rem;
margin: .1rem .22rem;



}

.images h2:hover {
opacity: 1;
}


.pool {
grid-column: 1;

}

.we {
grid-column: 2;
}

.wa {
grid-column: 4;

}

.wo {
grid-column: 3;
}




.pool:hover img {
filter:blur(5px) brightness(60%);

}

.wa:hover img {
filter:blur(5px);

}



.we:hover img {
filter:blur(5px);

}

enter code here

.wo:hover img {
filter:blur(5px);

}

Answer 1

您应该将.images img更改为我的CSS

.images img{
height:100%;
width:100%;
padding: 5px;
transition: .3s;

}

您可以在此处尝试使用代码https://codepen.io/anon/pen/wLGrom，希望这可以回答您的问题。

将％设置为所需的值。

为什么在浏览器大小更改时我的列不调整大小

1 个答案: