Button placed on top of an image with a Bootstrap overlay

I'm currently facing a challenge in creating an overlay for a card body in Bootstrap. The issue I'm encountering is that the overlay is blocking the button inside the card, preventing me from clicking on it. I'm unsure about the next steps to take and would really appreciate some guidance.

https://i.sstatic.net/ymai8.jpg

This is the HTML code:

    .rafting {
        background-image: url(./img/rafting.jpg);
        background-size: cover;
        color: white;
        
    }
    
    .rafting:before {
      content: "";
      position: absolute;
      left: 0; right: 0;
      top: 0; bottom: 0;
      background: rgba(0,0,0,.5);
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b4b544b4b5e491551487b0a150a0d150a">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<section class="offres">
  <h2 class="text-center">OUR OFFERS</h2>
  <div class="container">
  <div class="row text-center">
      <div class="column">
        <img class="mb-5" src="./img/picto-logo/picot1.png" alt="Snow" style="width:65%">
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
      <div class="column">
        <img class="mb-5" src="./img/picto-logo/picot2.png" alt="Forest" style="width:65%">
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
      <div class="column">
        <img class="mb-5" src="./img/picto-logo/picot3.png" alt="Mountains" style="width:65%">
         <a href="#" class="btn btn-primary">Hello</a>
      </div>
    </div>
  </div>
</section>

htmlcssbootstrap-4

Answer №1

To ensure an element appears on top, apply the z-index property. Start with a value of 9 and increment by 9 until achieving the desired outcome.

For example:

.button {
  z-index: 9;
}

Answer №2

To create an overlay effect, the parent div of the image should have a CSS property of "position:relative", and the overlay itself should have a CSS property of "position: absolute". The overlay will be displayed when you hover over the image.

.column {
  width: 300px;
  color: white;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 300ms ease;
}

.column img {
  width: 100%;
}

.btn-primary {
  position: absolute;
  z-index: 2;
}

.column:hover:before {
  opacity: 1;
  transition: all 300ms ease;
}
<section class="offres">
  <h2 class="text-center">OUR OFFERS</h2>
  <div class="container">
    <div class="row text-center">
      <div class="column">
        <img class="mb-5" src="https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg" alt="Snow">
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
      <div class="column">
        <img class="mb-5" src="https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg" alt="Forest">
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
      <div class="column">
        <img class="mb-5" src="https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg" alt="Mountains">
        <a href="#" class="btn btn-primary">Hello</a>
      </div>
    </div>
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a defined width and using block display will not solve the issue of the margin:auto not working

rough sketch of my desired design I am trying to center a label on the page. The parent container is set to a width of 100% and the label itself is displayed as a block element with margin set to auto. When I set the width of the label to a smaller value, ...

htmlcss

It seems that FireFox does not fully support IFrame Data URIs

Whenever I attempt to load a PDF Data URI into an iframe (for example, src="data:application/pdf;base64,...") in FireFox (version 18.0.2 [latest release], on OSX), it ends up triggering a download window instead. Just take a look at the website JSPDF.com ...

htmlfirefoxiframe

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...

htmltypescriptjsxsveltesveltekit

Having trouble with the page background image link not functioning properly because of the wrapper

I am facing an issue with my HTML layout. I have a full background image set within the body tag, followed by a wrapper element: <body> <a href="#" id="bkimage">Background Image</a> <wrapper> ................. Here are the styles ...

htmlcss

Adjusting Text Size Depending on Width

I recently used an online converter to transform a PDF into HTML. Check out the result here: http://www.example.com/pdf-to-html-converted-file The conversion did a decent job, but I'm wondering if it's feasible to have the content scale to 100% ...

javascripthtmlcssfont-size

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

I'm currently utilizing Bootstrap 4 along with Bootstrap Tags Input to create a multiple category selection feature. My goal is to enable users to choose multiple items exclusively from the predefined categories listed in the predefined_list. At pres ...

javascriptjqueryhtmlbootstrap-4bootstrap-tags-input

Why is it not functioning when storing responses in a jQuery variable?

I am working on a survey where each question is displayed one at a time. Users click on their answers, causing the current question to fade out and the next one to fade in. At the end of the survey, I want to show all the answers they selected. Below is t ...

javascriptjqueryhtml

How to apply custom styling to a specific element within an Angular Material 2 component using CSS based on its Id or

My EntryComponent features a material button menu where I attempted to customize the default style using ::ng-deep. However, the changes affected all button components in the parent Component as well. <style> ::ng-deep .mat-button{ max-width: 50 ...

angularcssangular-material2

Sidebar content alignment vertically

Struggling with aligning items in a sidebar, specifically regarding the fixed footer and the overflow of the main sidebar container. Trying to achieve a layout where the scrollable element stays within the designated space. Current setup includes: ...

htmlcsstwitter-bootstrapbootstrap-5

Textview is cluttering space with Html.fromhtml that is not needed

Situation 1 Here is the code I used to display HTML-formatted text in a TextView. However, it seems to be reserving space for a link that isn't visible. holder.textView.setMovementMethod(LinkMovementMethod.getInstance()); holder.textView.setText(Htm ...

androidhtmlandroid-layout

The background image will not repeat to completely cover the height

Click here to view my issue. I have set the background image to repeat the entire height, but it's not behaving as expected. Here is my CSS #wrapper { margin: 0px; padding: 0px; background: url(img02.jpg) repeat-x left top; } I attempt ...

htmlcss

re-establishing multiple selections in a dropdown menu in PHP/HTML

Hey, I've got this multi-select listbox... <select id="extfeat" name="extfeat[]" size="6" multiple=""> <option value="Wheel_Chair Accessible">Wheel Chair Accessible</option> <option value="Fruit_Trees">Fruit Trees& ...

phphtmlmulti-select

Capturing Click Events from Elements Below: A Step-by-Step Guide

In my layout, I positioned two tables side by side. Each table contains clickable items. By adjusting the margins and using relative positioning, I successfully moved the second table to be below the first one. However, a problem arose where clicking on it ...

javascripthtmleventsclick

Guide to embedding bootstrap.min.js into ember-bootstrap extension

I'm currently experiencing an issue with the ember-bootstrap plugin. Following the instructions on their setup page at , I downloaded and installed it. Once I began working on the Navbar, I encountered a problem. The Hamburger menu, which is supposed ...

javascriptbootstrap-4ember-bootstrap

What is causing my 100% height to be excessively large?

I'm facing an issue with my background containers, "background-overlay" and "background-gradient", as they are extending the height of the document beyond the actual content displayed. I am unsure of what could be causing this problem. It might be som ...

htmlcss

Building dynamic charts using JSON data in Oracle JET

I am attempting to populate a pie chart using JSON data retrieved from restcountries.eu/rest/v2/all. I use $.getJSON to fetch the data, create a temporary array as the data source, and then bind it to the pie chart. However, I seem to be encountering an er ...

javascripthtmlknockout.jsoracle-jet

Aligning text to the left center

I am looking to center left-aligned text in the yellow box (txtbox). The current look is like this: and I want it to appear like this: HTML: <div class="content container small"> <div class="txtbox"> ...

htmlcss

What is the best way to pass a variable from one PHP file to another?

This question may seem like a duplicate, but I found no helpful answers elsewhere. I'm in the process of creating a website where users can respond to various types of questions. To achieve this, I've written code that displays the corresponding ...

phphtmlmysql

Can a border not be added to a <tr> in an HTML table using CSS for any specific reason?

I am facing an issue with the borders of a table row (tr) when applying CSS styling. The tr has a class called "underRow" which is supposed to add a border at the bottom. In my CSS, I have defined the following for the ".underRow" class: .underRow { ...

htmlcsshtml-tablebordertablerow

Appear multiple areas on click with DIV element

I currently have a DIV that reveals another DIV when clicked, and it works perfectly. However, I run into an issue when I try to replicate the effect further down the page with the same ID's - nothing happens. Here is my script: <script> $(docu ...

jqueryhtmlclicktoggle