Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this?

    <div class="col-md-12 landing-container">
        <img src="images/pig.jpg" class="main-image" width="70%">
        <div class="uvp">
        <h1>Spread Compassion & Track Your Impact</h1>
        <button class="join-button">Join Now</button>
        </div>
    </div> 


.uvp {
    background: rgb(66,51,51);
    opacity: .8;
    ...
}

.uvp h1 {
    color: #fff;
    ...
}

.join-button {
    background: rgb(48, 118, 213);
    ...
}
htmlcss

Answer №1

To achieve the desired effect, you can set the opacity for the element containing .uvp and its child elements. Have you experimented with using background: rgba(66,51,51,0.8) instead?

Furthermore, ensure that the image is positioned behind the .uvp element by utilizing position: relative; z-index: -1; for the image.

Consider an alternative approach of setting the background to 

url(images/pig.png) center center no-repeat
for the .container element. However, make sure to adjust the height of .container accordingly and set the background size to contain using background-size: contain.

Answer №2

To achieve the desired effect, utilize the z-index property to arrange the transparent elements behind and the non-transparent elements in front. An example implementation is shown below: `

background: rgb(66,51,51);
opacity: .8;
position:absolute;
z-index:-1;

`


    background: rgb(48, 118, 213);
    //if you don't want changes to this class"

Answer №3

simply update 

.uvp {
    background: rgb(66,51,51);
    opacity: .8;
    ...
}

.uvp h1 {
    color: #fff;
    ...
}

.join-button {
    background: rgb(48, 118, 213);
    ...
}

with

.uvp {
    background: rgba(66,51,51,.8);
    ...
}

.uvp h1 {
    color: #fff;
    opacity: 0.8;
    ...
}

.join-button {
    background: rgb(48, 118, 213);
    ...
}

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

The error messages for validations are not appearing as expected in the display

I'm encountering an issue with my MVC Kendo window control where form validation doesn't seem to be working. Although I can see the model state as false in the controller, the view isn't displaying any error messages. It's important to ...

asp.net-mvchtmlkendo-uikendo-window

Possible conflict between CSS and JavaScript on Magento website

Problem Description: Visit this link for more details I am facing an issue with the product upload process when using certain attributes. It appears to be related to a positioning problem. Despite trying various solutions, such as removing the position at ...

javascriptjquerycssmagento

The updateItem function in the JSGrid controller was not called

Currently, I am working on a project involving js-grid. However, I have encountered an issue where the updateitem function of the controller is not being invoked when attempting to update a column field. Additionally, the field resets to its old value wi ...

javascripthtmlajaxjsgrid

Having trouble getting the tailwindcss Google font link tag to apply properly

When I use the @import in the tailwind css file, it works fine. However, when I try to add the font using the <link> tag in _document.jsx, it fails to work properly. In Chrome dev tools, it shows that the classes are applied but the fallback font is ...

cssreactjsnext.jstailwind-cssgoogle-fonts

Basic color scheme

I'm attempting to change the background color behind a partially transparent .png div. The CSS class that modifies the div is ".alert". Manually editing the .alert class background color works perfectly, and now I want to automate this on a 1-second c ...

javascriptjqueryhtmlcssloops

Issue with Bootstrap small column vertical alignment not functioning as expected

I am working on a bootstrap layout with two columns. One column contains multiple elements and text, making it quite long, while the other column only has an image. I am trying to center this image vertically within the left column of content. Here is the ...

htmlcsstwitter-bootstrap-3

Utilizing Jquery: Extracting the value of a child element upon clicking the encompassing parent div

I've created a table-like structure using divs instead of tables (because I strongly dislike tables). However, I'm facing an issue. I want to be able to click on one of the div elements and extract the values of its child elements. <div cla ...

jqueryhtml

Adhesive Bottom Navigation, Top Banner, and Full-Height Page Content

Trying to create a header, sticky footer, and content section with 100% height, but facing issues with the middle height. Below is the code and jsfiddles provided. Using HTML 4.0 strict in IE7 without the option to change. jsfiddle without 100% height: ht ...

csshtmlheightstrict

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...

cssreactjswebkitkebab-case

Complications arising from IE when using strict doctype with CSS and jQuery

Here's the code I'm using for a sliding caption effect on my gallery site: I specifically implemented the last effect which is the Caption Sliding (Partially Hidden to Visible). $('.boxgrid.caption').hover(function(){ $(".cover", th ...

jquerycssinternet-explorer

What is the proper way to attach the form tag action value in an EJS template?

Does anyone know about this? I am currently testing some JavaScript code: function mem_join_next() { if (document.mem_join.email.value == "") { alert("please input your email ID"); document.mem_join.email.focus(); return; } documen ...

javascripthtmlnode.jsejs

space allocated beneath a table cell

I am currently utilizing the foundation framework for emails and have encountered a formatting issue on my Test Page. There seems to be an unwanted whitespace just below the racoon image that I am struggling to remove. Despite setting the height to 250px, ...

htmlcss

What is the best way to adjust the layout of these two elements using CSS in order to display them on

I need assistance with adjusting the layout of a dropdown list next to its label in an Angular html page. <div *ngIf="this.userRole == 'myrequests'" class="col-2" [ngClass]="{ 'd-none': view != 'list&apo ...

cssangulartypescriptbootstrap-4

Passing a value from an HTML template to a method within an Angular 4 component

Encountering an issue with Angular 4. HTML template markup includes a button: <td><a class="btn btn-danger" (click)="delete()"><i class="fa fa-trash"></i></a></td> Data is assigned to each td from a *ngFor, like {{ da ...

htmlangulartypescript

Assign a background image to a button using an element that is already present on the page

Is there a way to set the background-image of a button without using an image URL? I am hoping to use an element already in the DOM as the background-image to avoid fetching it again when the button is clicked. For example, caching a loading gif within the ...

javascriptjqueryhtmlcss

Tips for eliminating annoying white space on petite gadgets with css programming?

Having an issue with my static html page where I am seeing white space on the right side when checking responsiveness. I have tried multiple solutions found here on stack overflow, including adding the following code: I attempted to add this inline: html ...

htmlcss

Trigger a random tune when hovering the mouse

I need help figuring out how to make a fixed image on my page trigger a random sound track when hovered over. The sound could be one of five different tracks. Here is the HTML for my image: <img src="images/Airplane.png" class="Airplane-photo"> Bel ...

javascriptjqueryhtmlcss

Is it possible to place two identical canvases on top of each other beside a separate canvas?

Trying to arrange two same-sized canvas elements on top of each other and next to a third canvas. In the figure below, I aim to have 2 and 3 positioned together, adjacent to 1. https://i.stack.imgur.com/dWkhc.png Attempting to address this issue with the ...

csshtmlcanvas

What is an html5 tooltip widget?

I stumbled upon a helpful tutorial on html5canvastutorials.com that caught my eye: let triangle = new Kinetic.Shape(function(){ let ctx = this.getContext(); ctx.beginPath(); ctx.lineWidth = 4; ...

htmlcanvastooltiphtml5-canvaskineticjs

What is the best method for automatically closing the modal window?

I implemented a modal window on my website. Within the modal, there is a green button labeled "Visit" which triggers the "Bootstrap Tour". I aim for the modal to automatically close when the tour starts. To access this feature on my site, users need to ...

javascripthtmltwitter-bootstrapbootstrap-4bootstrap-modal