如何为网格图像创建标题叠加? [英] How do I create title overlay for grid images?
本文介绍了如何为网格图像创建标题叠加?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试为网格系统中的图像创建标题叠加层. 所以我得到的是我的图像网格放置得很好，但没有标题覆盖.我尝试一次运行它，并且覆盖层不仅覆盖了页面运行，而且覆盖了整个网格.但是现在我可以很好地定位图像了，但标题覆盖了.我对此有疑问.
I am trying to create a title overlay for images in a grid system. So what I got is that my image grid is positioned nicely but without the title overlay. I tried running it one time and the overlay covers the entire grid not only that the page runs. But now I got the image to be positioned nicely but the title overlay. I am having issues with it.
这是我的代码:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 30px;
align-items: stretch;
}
.grid img {
display: block;
width: 100%;
height: auto;
}
.grid:hover.overlay {
opacity: 1;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
/* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .0s ease;
opacity: 0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
<div class="grid">
<div id="container">
<img class="img-fluid" src="Images/course1.jpg">
</div>
<div class="overlay">
<p>Soft Skill: Research Writing</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course2.jpg">
</div>
<div class="overlay">
<p>Research Writing</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course3.jpg">
</div>
<div class="overlay">
<p>Soft-Skill: Presentation Skill</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course4.jpg">
</div>
<div class="overlay">
<p>Presentation Skill</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course5.jpg">
</div>
<div class="overlay">
<p>
Web Development Fundamentals: HTML 5 and CSS3
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course6.jpg">
</div>
<div class="overlay">
<p>
PC Hardware Technology & Assembly
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course7.jpg">
</div>
<div class="overlay">
<p>
Web Development Intermediate: JavaScript and jQuery
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course8.jpg">
</div>
<div class="overlay">
<p>
Windows XP, 7, 8 & 10 Installation
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course9.jpg">
</div>
<div class="overlay">
<p>
Responsive Web Development: Boostrap
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course10.jpg">
</div>
<div class="overlay">
<p>
Printer Troubleshoot & Maintenance
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course11.jpg">
</div>
<div class="overlay">
<p>
Programming: C# Object-Oriented Programming
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course12.jpg">
</div>
<div class="overlay">
<p>
Laptop Troubleshoot and Maintenance
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course13.jpg">
</div>
<div class="overlay">
<p>
Programming: C# Programming
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course14.jpg">
</div>
<div class="overlay">
<p>
Mobile Devices Services and Repairs
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course15.jpg">
</div>
<div class="overlay">
<p>
Web Programming: PHP Fundamentals
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course16.jpg">
</div>
<div class="overlay">
<p>
CCTV Technology and Installation
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course17.jpg">
</div>
<div class="overlay">
<p>
Programming: C#
</p>
</div>
<div id="container">
<img class="img-fluid" src="Images/course18.jpg">
</div>
<div class="overlay">
<p>
Programming: ASP.NET MVC 5 Fundamentals
</p>
</div>
</div>
结果:
推荐答案
- 您是否正在寻找类似的东西?如果是，请尝试创建一个父div和一个子div，这样就可以通过以下方式解决此问题，如下面的代码所示:添加bg图像并为其添加叠加层.
- 您可以查看此Codepen，它以不同的方式起作用简单的图像悬停覆盖
.parent {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
float: left;
/* display: inline-block; */
cursor: pointer;
}
.child {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.bg-four {
background: url(https://www.thalesgroup.com/sites/default/files/styles/article_card/public/database/d7/e-services_modified_1.jpg?itok=DkaYx8h8) no-repeat center center;
background-size: cover;
}
.bg-five {
background: url(https://www.thalesgroup.com/sites/default/files/styles/article_card/public/database/d7/e-services_modified_1.jpg?itok=DkaYx8h8) no-repeat center center;
background-size: cover;
}
.bg-six {
background: url(https://www.thalesgroup.com/sites/default/files/styles/article_card/public/database/d7/e-services_modified_1.jpg?itok=DkaYx8h8) no-repeat center center;
background-size: cover;
}
.child a {
display: none;
font-size: 19px;
color: #ffffff !important;
font-family: 'Playfair Display', serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
cursor: pointer;
text-decoration: none;
width: fit-content;
}
.child a:after {
position: absolute;
content: '';
height: 2px;
bottom: 15px;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
background: yellow;
}
.parent:hover .child,
.parent:focus .child {
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.parent:hover .child:before,
.parent:focus .child:before {
display: block;
}
.parent:hover a,
.parent:focus a {
display: block;
text-decoration: none;
}
.child:before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgb(0, 0,0, 0.8);
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="parent " onclick="">
<div class="child bg-four">
<a href="#">1</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="parent " onclick="">
<div class="child bg-five">
<a href="#">2</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" onclick="">
<div class="child bg-six">
<a href="#">3</a>
</div>
</div>
</div>
</div>
</div>
这篇关于如何为网格图像创建标题叠加?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
