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 styling applied through the MUI TextField sx props does not take effect

Currently, I am attempting to customize a TextField component in a unique way using the sx prop: <TextField size="small" sx={{ padding: '1px 3px', fontSize: '0.875rem', lineHeight: '1.25 ...

htmlcssreactjsmaterial-uijsx

Ensure the cursor is continually grabbing while moving items within a list using the @angular/cdk/drag-drop functionality

I have an example on stackblitz where I am using @angular/cdk/drag-drop in my project. I am attempting to change the cursor to cursor:grabb and cursor:grabbing when the cursor is over an element and when I drag a picked element. Here is the CSS line I am ...

cssangular

Centering numerous elements on all screen sizes and devices

Is there a way to align elements in the center of the screen both vertically and horizontally without specifying width and height for mobile and desktop views? How can I make it responsive so that it appears centered on all devices? .parent-container{ ...

htmlcss

What is causing the additional space at the bottom?

Why does my centered black border triangle have an extra bottom margin causing a scroll bar to appear? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100%; background: blue; } .canvas { border: 10px s ...

csslayoutscreenpaddingmargin

Troubleshooting jQuery's issue with dynamically adding input fields

I came across a tutorial (which I tweaked slightly) on this website: code In JSFiddle, everything works perfectly fine with the code. However, when I implemented it on my actual page, it's not functioning as expected. I've been trying to trouble ...

javascriptjqueryhtml

Tips for shifting div background image while the push menu is in use

Looking for a Solution: I'm trying to figure out how to adjust my background image within a div when the push menu is active. Here's the CSS I'm currently using: .webcam-bg { background-attachment: fixed; background-image: url("../ ...

jqueryhtmlcss

Using the jQuery/JavaScript operator is similar to the SQL LIKE query with the wildcard %

Is there a way to search for a specific part of my input using JavaScript/jQuery? I've tried two different methods, but neither yielded any results. <script type="text/javascript> $("#button").click(function () { $("#DivToToggle").toggle(); ...

javascriptjqueryhtmlweb

Guide to setting up npm pug-php-filter in conjunction with gulp

I'm having trouble setting up pug-php-filter (https://www.npmjs.com/package/pug-php-filter) with gulp in order to enable PHP usage in my Pug files. Any assistance would be greatly appreciated. ...

phphtmlnpmgulppug

Position three paragraphs in the center of a div container

Is there a way to center 3 paragraphs in a div? I have separate divs for each paragraph and one main div that holds all three nested divs. div.first { font-family: 'Kanit', sans-serif; color: aliceblue; width: 30%; float: left; ...

htmlcss

Is there a way to eliminate this from the footer section?

Check out my website: If the text is not visible, try using a larger monitor or zooming out in your browser. I've added an image to help explain: I only want to remove that element + title on the first page This is the HTML code: <div id="to ...

htmlcss

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

Hey all, I recently started my journey into web development and I'm working on a feature to display "Last Refreshed ago" on the webpage. I came across this website which inspired me. What I aim to achieve is to show text like "Last Refreshed 1 sec ago ...

javascripthtmlexpressnpm-package

When an li element is styled with a width of 50% and floated to the left, it does not display the bullet points

When attempting to create a 2-column list, I implemented the following CSS: ul { overflow: hidden; } ul li { float: left; width: 50%; } However, I noticed that when I have 2 items in the list, the one on the right displays a list bullet while th ...

htmlcss

Is there a way to create a diagonal movement for an image by clicking on another HTML element?

<!DOCTYPE html> <html> <head> <meta charset="UTF-9"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function() { $(document).re ...

javascriptjqueryhtmlajax

I'm encountering an issue trying to launch bigbluebutton HTML5. I attempted to initiate it using "npm start" after installing it with "meteor npm install," but unfortunately, it failed to

I've been attempting to launch the Development environment for bigblubutton-html5, but unfortunately, I encountered an error message after executing this command: npm start Please refer to the tutorial I used: Here's the error message that was ...

htmlnpmmeteorbigbluebutton

Angular - creating adaptive HTML container with CSS styling

I am trying to achieve a layout similar to the one shown in the image. A container can have multiple elements starting within it or no elements at all. The elements always have a fixed height, and the container's height is determined by the number of ...

htmlcssangular

Error Encountered: Angular JS Throwing Unhandled Injection Error

I am having trouble validating the fields in my index.html and js files. I keep seeing errors, even after trying different versions of angular-route.min.js and angular.js. AngularJs | Basic Login Form <body ng-app="myApp"> ...

javascriptjqueryhtmlangularjs

Track user sessions and transfer username to final page

Is there a way to showcase the chosen username from a dropdown menu on the initial page and then also display it on the last page without having to pass variables between pages? Additionally, if I wish to incorporate a timer on a middle page, how can I sto ...

phphtml

Is there a way to customize the animation for a button in material UI?

Trying to implement material UI in React and looking for a button that does not have the standard wave animation effect upon clicking, which you can see demonstrated here. Instead, I am searching for an animation that instantly fills the entire button wit ...

javascriptcssreactjsmaterial-ui

Is there a different way to invoke PHP within JavaScript?

Is it possible to include PHP code in JavaScript? I have come across information stating that this practice is not recommended: document.getElementById('id1').innerHTML="<?php include my.php?>"; If including PHP directly in JavaScript is ...

javascriptphphtmlweb

Node.js script encounters errors fetching static files

My HTML index.html file has multiple containers, and I have included the bootstrap and font awesome folders in the <head> section like this: <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap/css/bootstra ...

htmlnode.jsexpress