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.

Here's my code:

.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>

Result:

回答1:

Are you looking for something like this? If yes, try to make a parent div and a child div, so you can work around this way as shown in below code by adding bg image and adding overlay for it.
You can look at this codepen which works around in a different way simple image hover overlay

.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>

来源：https://stackoverflow.com/questions/56553974/how-do-i-create-title-overlay-for-grid-images

标签

css

bootstrap-4