decrease the transparency of the main content on the page while keeping the image within

Is there a way to decrease the opacity of the background color for the body of the document while keeping the background color of the element with the id scene at full opacity?

Currently, the opacity for the entire document is set to 0.5.

$(".artist").hover(function() {
  $("body").stop().animate({
    "opacity": 0.5
  });
}, function() {
  $("body").stop().animate({
    "opacity": 1
  });
});
body {
  background: yellow;
}
#scene {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="scene">
  <div class="artist">Test me</div>
</div>

Answer №1

One cannot simply alter the opacity of the body element without affecting its children, as they are essentially nested within it. A workaround would be to utilize pseudo-elements such as body:after {} and implement a background setting there instead.

Nonetheless, the most straightforward method involves using rgba to define the background color:

body {
    background-color:rgba(0,0,0,0.5);
}

This will result in a semi-transparent black shade, appearing at 50% opacity.

Answer №2

Using jQuery to achieve this effect requires incorporating jQuery UI to animate the background color. Instead of altering opacity, which impacts child elements, you can modify the background color using rgba values as shown below:

$(".artist").hover(function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,0.0)"
  });
}, function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,1)"
  });
});

$(".artist").hover(function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,0.0)"
  });
}, function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,1)"
  });
});
body {
  background: #e6e6e6;
}
#scene {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="scene">
  <div class="artist">Test me</div>
</div>

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

What steps should I take to make my Twitter widget adaptable to varying screen heights?

I'm currently utilizing react-twitter-widgets to incorporate a Twitter timeline within my application. While everything is rendering correctly, the height of the timeline extends down the entire page. Is there a way to adjust the widget's height ...

The requested TYPO3 eID for ajax functionality could not be found and returned a

I am using TYPO3 version 7.6.18 and attempting to set up ajax requests on the front end. I need the ajax request to call a specific plugin controller and action. I have tried different AjaxDispatchers, but now I am encountering a 404 error stating "eID not ...

Having trouble getting unique input values to pass through ajax

For the past couple of weeks, I've been searching for a solution to my issue. The problem arises in my PHP foreach loop where I have div tags representing rows of data fetched from the database. Each div row contains HTML input elements and a button t ...

Populate modal form with database information without using Bootstrap

As I work on populating a form with data from an sqlite database, I've come across a stumbling block. My code is available for reference on JSFiddle: https://jsfiddle.net/daikini/e71mvg7n/ One important note: Bootstrap isn't being utilized in t ...

When attempting to use `$('.classitem').submit(function(event){event.preventDefault})`, the function fails to execute

I have a question I'm eager to find an answer to. Here is the code snippet I'm working with: $('.comment').submit(function(event) { event.preventDefault() Every time I try to submit it, the page reloads instead of submitting th ...

Set the first link in a menu to be highlighted as active using jquery

In order to mark the first link in my menu as active, I need it to have specific CSS settings applied. Using jQuery to add these settings to every link when clicked on makes it a bit tricky (simple menu = clicking changes color). So, I want the first link ...

Framework for developing websites with search engine optimization in mind, powered by

In the past, I have utilized JQuery + JQueryUI for various projects, including an ERP project. However, developers sometimes found the framework I created to be inadequate and messy. Now, I am embarking on a new venture—a public eCommerce website similar ...

Experiencing an unexpected wait before the requestAnimationFrame?

Surprisingly, Internet Explorer is actually performing the way I want it to in this case :-) I developed a function for SVG animations using requestAnimationFrame (for simplicity, I left out the value calculations here ... but my initial test involved an ...

Troubleshooting Issue: Chrome Extension Fails to Send Data via Ajax

I'm encountering an issue with my Chrome Extension where I can successfully retrieve data from my 'punch.php' file, but I am unable to pass data to it. Below is the code snippet causing the problem: jQuery.fn.punch = function(){ $(this) ...

Add class or id dynamically when clicked

How can I dynamically change the CSS color of a roller-banner div based on user input? I have a codepen setup where I want to capture the class of the clicked element (e.g. colour3), and then apply that as an ID or class to the roller-banner div. Codepen ...

Experiencing data loss while utilizing BeautifulSoup

I am currently working on a tutorial from the book 'Automate the Boring Stuff with Python' where I am practicing a project titled 'Project: “I’m Feeling Lucky” Google Search' Unfortunately, the CSS selector used in the project is ...

Hovering into Transition Time

My article card has a transition on the top attribute of the info div, which is supposed to be smooth and last for 0.3 seconds. However, the description suddenly appears during this transition. I'm trying to figure out why this is happening and how to ...

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

After applying this CSS code to remove all styles: * { all: unset; display: revert; } The issue arises in Chrome browser where CSS Hyphens are not taking effect. This can be seen with the following example: div { font-size: 3rem; -webkit-hy ...

Change the border color of a form field in a material design if the user interacts with the

Is there a way to change the border color of a material form field in Angular when it is touched, focused, or active? I attempted to modify the color by overriding material css-class and also tried creating my own css class, but neither method had any ef ...

Troubles with basic jQuery hide and show functionalities

Hey there! I've been working on a project for the past couple of days and I'm having trouble with creating a slider effect using jQuery hide and show. It's strange because my code works perfectly fine with jquery-1.6.2.min.js, but when I swi ...

eliminate particular item, from duplicated component

I have a Javascript code that allows me to add (clone) and delete an element. $('#btnAdd1').click(function (event) { var num = $('.linguas').length; var newNum = new Number(num + 1); var newElem = $('#input_' + nu ...

Issue with sticky navbar in parallax design

I have been working on a website where all pages feature a header and a navbar located just below it. As the user scrolls down the page, I want the navbar to stick to the top of the screen once it reaches that position. However, on one specific page, I am ...

The functionality of JQuery fails to work properly when receiving an AJAX response

I have separated my code into three main sections: a PHP file, a jQuery section with an AJAX function that requests data, another PHP file. The response from the AJAX request is HTML that needs to be added at the beginning of a specific DIV inside the i ...

Tiny adjustment to jQuery Collapsible Panel

I have successfully implemented a jQuery Accordion in my demo. When I click on 'About Us', it reveals the 'Team' link below. Exciting! Now, I am wondering if it is possible for this Accordion to function without needing the 'item& ...

Performing read and write operations on targeted CSS classes using C#

I'm currently developing a C# application that needs to manipulate CSS files. Imagine you have the following CSS code snippet: .ClassOne { color: #FFFFFF; font-weight:normal; font-size: 9pt; font-family: Tahoma; ...