Using an overlay with figure-img in Bootstrap 4 is a visually appealing design

Question

Using an overlay with figure-img in Bootstrap 4 is a visually appealing design

I need assistance with adding an overlay to only the bootstrap 4 figure-img. In order to achieve this, I inserted a div with the class overlay beneath the figure-img.

Below is the code snippet:

<div class="col-md-4">
  <figure class="service text-center">
    <img src="img/service1.jpg" class="figure-img img-fluid w-100" alt="Repair Request Service">
    <div class="overlay"></div>
    <figcaption class="figure-caption">
      <h4>Repair Request Service</h4>
      <p>We care about you and your vehicle. Whether it's for an auto repair or scheduled maintenance, we ensure that you are well taken care of.</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

The CSS looks like this:

.services .figure-img {
    margin-bottom: 0;
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    background: #f00;
    height: 100%;
    width: 100%;
    opacity: 0;
    display: none;
}
.service:hover .overlay {
    display:block;
    opacity: .3;
}

However, the overlay is currently taking up the full width, including the padding on the right and left sides of col-md-4, resulting in this display:

https://i.sstatic.net/1BaJi.jpg

How can I resolve this issue and properly position the overlay within the .figure-img element?

html twitter-bootstrap css bootstrap-4

Answer 1

Answer №1

I successfully resolved the issue by creating a new HTML structure. I introduced a svcimg div and nested both .figure-img & .overlay inside it.

Below is the updated HTML code:

<div class="col-md-4">
  <figure class="service text-center">
    <div class="svcimg">
      <img src="img/service6.jpg" class="figure-img img-fluid w-100" alt="Erection on Metal Build">
      <div class="overlay"></div>
    </div>
    <figcaption class="figure-caption">
      <h4>Referrals Service</h4>
      <p>Customer referral is our most popular form of advertising. We greatly appreciate the confidence of your referral. To show our gratitude</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

Here is the modified CSS:

.services .service .svcimg {
    position: relative;
}

.services .service .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #f41004;
    background: -moz-linear-gradient(top, #f41004 0%, #207cca 100%, #3557f3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f41004 0%,#207cca 100%,#3557f3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f41004 0%,#207cca 100%,#3557f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f41004', endColorstr='#3557f3',GradientType=0 ); /* IE6-9 */
        transition: 0.3s ease;
}

.services .service:hover .overlay {
    opacity: .5;
    transition: 0.3s ease-in-out;
}

And finally, here is the visual outcome: https://i.sstatic.net/bA4pW.jpg

Answer 2

I successfully resolved the issue by creating a new HTML structure. I introduced a svcimg div and nested both .figure-img & .overlay inside it.

Below is the updated HTML code:

<div class="col-md-4">
  <figure class="service text-center">
    <div class="svcimg">
      <img src="img/service6.jpg" class="figure-img img-fluid w-100" alt="Erection on Metal Build">
      <div class="overlay"></div>
    </div>
    <figcaption class="figure-caption">
      <h4>Referrals Service</h4>
      <p>Customer referral is our most popular form of advertising. We greatly appreciate the confidence of your referral. To show our gratitude</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

Here is the modified CSS:

.services .service .svcimg {
    position: relative;
}

.services .service .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #f41004;
    background: -moz-linear-gradient(top, #f41004 0%, #207cca 100%, #3557f3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f41004 0%,#207cca 100%,#3557f3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f41004 0%,#207cca 100%,#3557f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f41004', endColorstr='#3557f3',GradientType=0 ); /* IE6-9 */
        transition: 0.3s ease;
}

.services .service:hover .overlay {
    opacity: .5;
    transition: 0.3s ease-in-out;
}

And finally, here is the visual outcome: https://i.sstatic.net/bA4pW.jpg

Answer 3

Answer №2

.overlay in the provided example is positioned relative to .col-md-4.

To ensure that .overlay works as intended, add position: relative; to .service.

.service .figure-img {
  margin-bottom: 0;
}

.service {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  background: #f00;
  height: 100%;
  width: 100%;
  opacity: 0;
  display: none;
}

.service:hover .overlay {
  display: block;
  opacity: .3;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="col-md-4">
  <figure class="service text-center">
    <img src="https://picsum.photos/800/600" class="figure-img img-fluid w-100" alt="Repair Request Service">
    <div class="overlay"></div>
    <figcaption class="figure-caption">
      <h4>Repair Request Service</h4>
      <p>We prioritize your needs and vehicle well-being. Whether it's an auto repair or scheduled maintenance, we've got you covered.</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

UPDATE

If you want the overlay to cover only the img, not the entire figure, you'll need to create a wrapper for the img and place the .overlay inside.

.service .figure-img {
  margin-bottom: 0;
}

.img-container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  background: #f00;
  height: 100%;
  width: 100%;
  opacity: 0;
  display: none;
}

.service:hover .overlay {
  display: block;
  opacity: .3;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="col-md-4">
  <figure class="service text-center">
    <div class="img-container">
      <img src="https://picsum.photos/800/600" class="figure-img img-fluid w-100" alt="Repair Request Service">
      <div class="overlay"></div>
    </div>
    <figcaption class="figure-caption">
      <h4>Repair Request Service</h4>
      <p>We care about you and your vehicle. We want to make sure whether you see us for an auto repair or a scheduled maintenance, that we</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

Answer 4

.overlay in the provided example is positioned relative to .col-md-4.

To ensure that .overlay works as intended, add position: relative; to .service.

.service .figure-img {
  margin-bottom: 0;
}

.service {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  background: #f00;
  height: 100%;
  width: 100%;
  opacity: 0;
  display: none;
}

.service:hover .overlay {
  display: block;
  opacity: .3;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="col-md-4">
  <figure class="service text-center">
    <img src="https://picsum.photos/800/600" class="figure-img img-fluid w-100" alt="Repair Request Service">
    <div class="overlay"></div>
    <figcaption class="figure-caption">
      <h4>Repair Request Service</h4>
      <p>We prioritize your needs and vehicle well-being. Whether it's an auto repair or scheduled maintenance, we've got you covered.</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

UPDATE

If you want the overlay to cover only the img, not the entire figure, you'll need to create a wrapper for the img and place the .overlay inside.

.service .figure-img {
  margin-bottom: 0;
}

.img-container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  background: #f00;
  height: 100%;
  width: 100%;
  opacity: 0;
  display: none;
}

.service:hover .overlay {
  display: block;
  opacity: .3;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="col-md-4">
  <figure class="service text-center">
    <div class="img-container">
      <img src="https://picsum.photos/800/600" class="figure-img img-fluid w-100" alt="Repair Request Service">
      <div class="overlay"></div>
    </div>
    <figcaption class="figure-caption">
      <h4>Repair Request Service</h4>
      <p>We care about you and your vehicle. We want to make sure whether you see us for an auto repair or a scheduled maintenance, that we</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

Using an overlay with figure-img in Bootstrap 4 is a visually appealing design

Answer №1

Answer №2

Similar questions

Develop interactive card collections in Bootstrap that adapt to different screen sizes

What steps should I take to create this animation?

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

Tips for identifying text within HTML code

Div with a vertical line

"An issue with IE9 causing small dots on rounded corners during rendering

How can I keep a button element in place when resizing the window using CSS?

CSS issue encountered: "Value of property is not valid"

Required inputs do not disrupt the form's action flow

Java Applet for capturing specific sections of a webpage to create a screenshot

Methods to disregard class prefix in css document

Stop the duplication of the HTML content to ensure only one copy is saved

Splitting a td tag into multiple columns dynamically with Angular

Discover the hexadecimal color code generated from an rgba color

`The search bar and search button`

Unable to display animation without first launching it on Rive web

The Page Transcends the Boundaries of the HTML Tag

Switching to a dropdown navigation option

Animation unveiling of text slides

Searching for matching strings in jQuery and eliminating the parent div element