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:

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:

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:

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

Steer clear of using inline styling when designing with Mui V5

What advantages does Snap.svg offer compared to the HTML5 native SVG DOM API?

Assistance is required to navigate my character within the canvas

Number Stepper Reverse

The checkbox event listener becomes dysfunctional when the innerHTML of its container is modified

How can I make the top two divs stay fixed as I scroll down, and then reset back to their initial position when scrolled

eliminate gaps between hyperlinks using cascading style sheets

The -webkit-background-clip feature seems to be malfunctioning in Safari

Jquery is failing to handle multiple inputs

Ways to toggle the display of a div depending on various radio button selections

The animation came to a halt after a brief period

Measure with an "em" unit indicated by a dot

Is there a way to dynamically update text using javascript on a daily basis?

There seems to be a problem with the responsive navigation menu when activated in responsive mode and then resizing the screen

issue arising where the table's border is not displaying

Customizing styles in ZK based on theme

Steps for triggering a modal popup using server-side code when a button is clicked

Adjust the contents of a DIV depending on which Toggle button is selected

Issue with ChartJs version 2.8.0: The custom tooltip remains visible even when clicking outside the chart canvas or moving the mouse pointer

Transfer a variable from one PHP page to another and navigate between the two pages