https://codepen.io/LifuTao/pen/JZaVNX超文本标记:
<div id = "element">
<div class = "item" id ="box_one"><img src = "https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/wp-content/uploads/2017/04/2018-BMW-M4-CS-PLACEMENT-626x383.jpg?crop=1xw:1xh;center,center&resize=450:*" id="bmw" class = "car overlay">
<p class = "text">Wannabe Baller</p>
</div>
<div class = "item" id="box_two"><img src ="https://assets.mbusa.com/vcm/MB/DigitalAssets/Vehicles/ClassLanding/2018/S/Maybach/BASE/GALLERY/2018-MAYBACH-GALLERY-001-SET-A-WP.jpg" id="maybach" class = "car overlay"><p class="text">Savvy Entrepreneur</p></div>
<div class = "item" id ="box_three"><img src="https://icdn-3.motor1.com/images/mgl/nvEe6/s1/2019-audi-a7-sportback-photo-shoot-in-olso.jpg" class = "car overlay" id="audi">
<p class= "text">I'm not like the other guys</p></div>
<div class = "item" id ="box_four"><img src = "https://files2.porsche.com/filestore/image/multimedia/none/911-carrange-jdp-2017/normal/2269da21-2995-11e7-9f74-0019999cd470/porsche-normal.jpg" class = "car overlay"id = "porsche"><p class= "text">I know a lot about cars</p></div>
<div class = "item" id = "box_five"><img src ="https://jaguar.ssl.cdn.sdlmedia.com/636553494257956285DM.jpg?v=22" id = "jaguar" class = "car overlay"><p class = "text"> My car is the fastest in the land</p>5</div>
<div class = "item" id = "box_six"><img src = "https://article.images.consumerreports.org/h_436,w_598/prod/content/dam/CRO%20Images%202017/Cars/October/CR-Cars-598-2018-Lexus-LS500-10-17" id = "lexus" class = "car overlay">
<p class = "text">I'm better than them Toyota driving folks</p>
</div>
</div>
THE CSS:
#element{
display: inline-grid;
grid-template-columns: [one] 200px [two] 200px [three] 200px;
grid-template-rows:200px 200px 200px;
position:relative;
left:200px;
top:100px;
}
.item
{
border: 1px solid red;
}
#bmw
{
max-width:100%;
}
.item:hover
{
transform:scale(1.5);
}
.overlay
{
height:100%;
width:100%;
}
.text
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color:yellow;
max-width:100%;
}
代码在^以上。我遇到的问题是,在网格的第五个框中,所有的文本都变得杂乱无章,我不希望这样。我很感谢你的帮助。
https://stackoverflow.com/questions/51092520
复制相似问题