My website features a large background image, with the following code:
body{
background-image: url(../images/front/bg.jpg);
background-position: center center;
background-size:cover;
padding:0;
margin:0;
width:100%;
height:100%;
}
I am looking to add a smooth black curtain effect when an element is selected to display its text or image. A great example of this can be seen at this link. When you click on any menu, the background darkens. How can I implement this effect on my own website?
Utilizing pseudo elements on the body can enhance your design, as shown below:
html, body
{
height: 100%;
}
body
{
background-image: url(http://www.placehold.it/1000x800);
background-size: cover;
background-attachment:scroll;
position: relative;
}
body.dark:after
{
position: absolute;
content: "";
left:0;
right:0;
top:0;
bottom:0;
background-color: rgba(0,0,0,0.3);
z-index:-1;
}
Take a look at this demo http://jsfiddle.net/NicoO/sv4yu/
Alternatively, here's an updated version with CSS transitions: http://jsfiddle.net/NicoO/sv4yu/1/
body:after
{
transition-duration: 0.5s;
background-color: rgba(0,0,0,0);
position: absolute;
content: "";
left:0;
right:0;
top:0;
bottom:0;
z-index:-1;
}
body.dark:after
{
background-color:rgba(0,0,0,0.3);
}
You could also consider adding a transition for the opacity of the pseudo element.
What do you think about this approach?
<body>
<div></div>
</body>
body{
background-image: url(../images/front/bg.jpg);
background-position: center center;
background-size:cover;
padding:0;
margin:0;
width:100%;
height:100%;
}
body > div {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background: #000;
opacity:0.4;
}
Your main content can be placed inside the body, within another div with top:0 and left:0. By utilizing the opacity property, a smooth transition effect can be achieved. Have you considered implementing this solution?
Their activity on the website involves replacing this particular image with another one
One method to accomplish this is by using jQuery, such as:
$('img').attr('src','newImg.jpg');
and incorporating a css transition to create a gradual effect
Is there a way to instruct the browser to download a font only if it is not already built into the OS of the system? Right now, I am using @font-face to define the font, but this results in the font being automatically downloaded by the browser. I would l ...
I'm currently facing a unique situation on my website where I have an iframe within the same domain. Unfortunately, due to deployment issues, I am unable to access the code inside the iframe. Whenever the iframe loads, it triggers a redirection on th ...
Currently, I am utilizing MUI makeStyles() to create a series of CSS classes. Within these classes, I am dynamically including and excluding one specific class to my Box element during file drag-and-drop events. The class is successfully added, as I can o ...
My current project involves utilizing the d3js tree layout to showcase an interactive tree structure on the screen. Is there a comprehensive tutorial or detailed documentation available for effectively implementing the d3js tree layout? Furthermore, I ai ...
I currently have a CSS gradient applied and I am interested in creating an image or SVG file from it. However, I am unsure of how to accomplish this task. Any advice would be greatly appreciated. background: -webkit-linear-gradient(bottom, rgb(211, 208, ...
After tirelessly searching for answers all over the web, I've hit a dead end and now I turn to you for assistance. My current dilemma revolves around the lack of smoothness in my animations, whether it be through jQuery .animate or CSS3 transitions. ...
In my Rails application, there is a page with a table that uses partial AJAX to increase the capacity attribute in a time entity. You can view the visual representation of the table here. By clicking the plus/minus button, the capacity attribute increases ...
Having spent a lot of time studying auto slideshows, I'm facing an issue where clicking on the bullet to show the next image results in the image disappearing suddenly. Initially, I thought the problem was with using addEventListener events, so I swi ...
I am working on a website that utilizes a Gravity Forms form along with the GF Populate Anything add-on plugin to load data dynamically using ajax. I am facing an issue when trying to implement a simple JavaScript function to detect changes in one of the i ...
I am facing an issue while trying to run a legacy create-react-app that utilizes Sass. Initially, when I ran npm start, I encountered the error 'Cannot find module sass', which resembled the message found in this stack overflow post. To resolve t ...
I have a challenge with animating div tags once they come into view on the page. Thanks to waypoint.js, I have successfully achieved the 'in viewport' trigger, but now I need help with the animation part. Specifically, I am looking to add a grey ...
As the sidebar collapses, the text adjusts to its width in a choppy transition I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines I want the text to appear only after the collapse tra ...
I need some assistance with an issue I've run into while using jQuery's .remove(). Here is a snippet of code that showcases the problem: $( '.video-button span.glyphicon-play' ).click(function() { $( '#video-player' ).ap ...
Looking to set up cascading dropdowns where options are loaded from a SharePoint list via AJAX calls. Wondering if there's a way to extract the text of the selected option and use it in another AJAX request URL. Tried referencing this resource: knocko ...
User.cs: An error is occurring in the User class where 'User' is not a valid type in the context of TestBlazor project. It happened when attempting to save user registration data. using System; using System.Collections.Generic; using S ...
I have gathered a collection of required form elements and have added a 'blur' listener to them. var formInputs = $(':input').filter('[required]'); formInputs.each(function(i) { $(this).on('blur', function ...
I have a component called Rating that displays a star rating like this: var Rating = React.createClass({ render: function () { return ( <div className="rate-line"> <div className="rate-title">{this.props ...
Thank you for your patience with me as I continue to learn and improve my coding skills. The assistance I've received so far has been invaluable, and I truly appreciate it. I currently have a code snippet that calculates the amount of fabric being pu ...
I'm currently developing a Vue website with multilingual support. The chosen language is stored in a Vuex store and accessed through the computed property lang, like so: lang(){ return this.$store.state.lang } I use this lang property in v-if cond ...
I attempted to apply a background image to the body element using the following CSS code: body { background: url("http://beerhold.it/1024/800") center bottom; z-index: 10; height: 100%; background-repeat: no-repeat; ...