Background image with a translucent overlay set at 50% opacity

Looking to add a new section on my website that I haven't attempted before. My goal is to have a section with a full width background image, but with a 50% opacity color overlay on the right side of the image. I came across an example image that demonstrates exactly what I'm trying to achieve:

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

I've searched extensively on Google for tutorials on how to create this effect, but all I could find were tutorials for full width images with full width opacity color overlays.

htmlcss

Answer №1

give this a shot

.box {
  position: relative;
}

#overlay_div {
  background: #fff;
  height: 500px;
  width: 70%;
  position: absolute;
  top: 0px;
  left: 30%;
  opacity: 0.5/* adjust to your desired transparency */
}

img.fade_effect {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
}
<div class="box">
  <div id="overlay_div"></div>
  <img class="fade_effect" src="https://hindi.oneindia.com/img/2017/10/68-28-1477651101-02-1506944733.jpg" width="70%">
</div>

Answer №2

To create a stylish overlay effect, consider using an absolute positioning for the overlay element and starting it in the center of the page by setting its left value to 50%.

Customize the color and opacity of the overlay to suit your design needs.

Answer №3

If you find this information useful, feel free to try implementing it yourself using before and after pseudo elements.

div {
background:url('https://dummyimage.com/600x400/000/fff') no-repeat top center;
height: 500px;
width: 100%;
background-size: cover;
position: relative;
}

div:before, div:after {
content:'';
width: 50%;
position: absolute;
top:0;
bottom:0;
display:block;
z-index:1;
}

div:before{left:0; background: rgba(255,255,255,.8);}

div:after{right:0; background: rgba(255,255,255,.5);}
<div></div>

Answer №4

If you are unable to code it yourself, one option is to simply modify the background image to include the overlay already integrated. Keep in mind though, this method may not be ideal for responsive websites.

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

When the "change" event listener is added to an input element, the innerHTML is updated as the value increases but not when it decreases

My div block contains a value that I need to adjust as the input value changes. While the adjustment works when the input value increases, it does not change when the input value is decreased. It seems like there may be an oversight in my logic that I am m ...

javascripthtml

Error encountered when compiling SCSS with the '@use' statement

Currently, I am utilizing Gulp for the purpose of compiling scss into css. However, whenever I include a @use statement in my code, it does not compile the css correctly into the css file; instead, it simply duplicates the @use statement. What could be cau ...

csssass

Implementing week numbers display in Twitter Bootstrap's date picker

I am currently utilizing the Twitter Bootstrap datepicker plugin which can be found at the following link: My goal is to display week numbers similar to the example shown here: http://jsbin.com/omaqe/1/edit Instead of modifying the jQuery plugin, I would ...

javascriptjquerycsstwitter-bootstrapdatepicker

Incorporating JSON data into data-groups within an Ionic application

I am currently working on developing an Ionic app using the newest version (Ionic 3xx and Angular 5) and I am attempting to incorporate the shuffleJS feature for filtering. Everything was working fine when I used static data in my template with the 'd ...

jsonhtmlangularionic-framework

Generating a downloadable picture with jQuery freeze frame

If you're looking to add animation to a gif upon mouseover, the Freezeframe plugin created by Chris Antonellis is the perfect solution. Simply use the command below: < img src="image.gif" freezeframe /> For a live example, visit his website he ...

jqueryhtmlcss

How to efficiently embed one HTML file within another HTML file

Currently, I am working with a file called a.html and its accompanying CSS file, a_style.css, which is linked in the <head>. Now, I have another HTML file named b.html, with its own styles included within the <style> tag. The content of b.html ...

phphtmlcss

Arranging Elements in the Navbar with Bootstrap 5

Working with Bootstrap-5, I've been experimenting with the new way to create a navigation bar and almost have it how I want. However, I'm struggling to align the last element to the right. Any suggestions? Here is what my current setup looks lik ...

cssnavbarbootstrap-5

Utilizing processing.js across various JavaScript pages

Over here on the Processing website, you'll find detailed instructions on two methods for setting up the Processing library. I am currently experimenting with the first method. Here's the code I am using: <html> <head> &l ...

htmlprocessing.js

Tips for Styling "Opened" Elements within the <Summary><Details> Web Design in HTML using CSS? (a color coding challenge)

I've dedicated a significant amount of time crafting my ultimate HTML FAQ with detailed summaries styled in CSS. There's one aspect that continues to elude me - achieving the perfect orange background color for expanded topics: My goal is for a ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

Hide Scrollbar in CSS

Looking for a way to conceal the vertical scrollbar on my website, especially on mobile devices with touch scrolling capabilities. I attempted using CSS but didn't get satisfactory results, especially on older browser versions. ...

htmlcss

Tips for locating a file using javascript

My application scans a folder and displays all folders and HTML files inside it in a dropdown menu. It also shows any HTML files inside an iframe. There is one file named "highlighted.html" that should not appear in the dropdown menu, but if it exists in t ...

javascriptjqueryhtmliframe

jQuery event triggers upon completion of execution

A custom code has been integrated into my project using jQuery. Check out the code snippet below: <script> $("#startProgressTimer").click(function() { $("#progressTimer").progressTimer({ timeLimit: $("#restTime").val(), onFinish ...

javascriptphpjqueryhtmlcss

Form request is coming back as blank

Here's the code snippet I'm using for user sign-ups: public partial class signup : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Response.Write(Request.Form["username"]+"SSS"); Page.Validate( ...

c#htmlasp.net

What is the best way to align elements in a div or navigation section?

Behold, my masterpiece navigation bar: #main-nav-bar .nav-item { display: inline-block; padding: 0.5%; border-right: 1px solid white; } #main-nav-bar a { text-decoration: none; color: #CFCFE0; } <nav id="main-nav-bar"> <a href="#Ser ...

htmlcss

Exporting an HTML table to Excel while excluding any hidden <td> elements

I have a web application with an HTML table that displays data to users. I wanted to export the table to Excel and found a jQuery code for it. However, the exported data includes information that is hidden in the table. Is there a way to export the tabl ...

javascripthtmljquery

Loading a Div Element on the Fly

I have a variety of checkboxes that are generated through iteration from a collection using the foreach loop of the core tags in JSP with parameters ID (which represents the ID of the checkbox) and key. Both the ID and key are dynamically populated based o ...

jqueryhtmlajaxforms

Video background is malfunctioning on Firefox and Internet Explorer

Currently, I am facing some issues with the JQuery plugin 'videoBG'. The problem is that when I view the video offline, it works perfectly in all browsers. However, once I go online, the video stops working in FireFox and IE. It seems like the sc ...

jqueryhtmlweb

Clicking the button will remove any previously applied CSS style using jQuery

Is there a way to remove the background color that was applied to a previously clicked button when clicking on another button? The current code successfully changes the background color of the clicked button upon hover, but it doesn't reset or remove ...

javascripthtmljquerycss

Ensure that the container div is filled by the image if the image exceeds the dimensions of

I have a footer menu with a background image that is larger than the div itself (2000x168). Even though I have set the width to 100%, it seems like the whole image isn't displaying. Instead, only a portion of it is visible, matching the size of my sc ...

htmlcssbackground

Navigational menu on website communicates with embedded Tableau iFrame

I have successfully integrated a Tableau dashboard/worksheet into my website using an iframe. I want to create navigation on the parent site that allows users to interact directly with the embedded dashboard by switching between different views, instead ...

pythoncsstableau-apijss