Unique lightbox effect with multiple layers

Currently, I am working on implementing a lightbox effect to showcase images to the user using a GridView. Upon clicking an image, a new layer should appear above the current page displaying a larger version of the image along with some description. Although I have successfully displayed the layer with the image and its content, everything appears transparent. I have tried adjusting the opacity to 1 and moving other elements to a higher z-index, but unfortunately, nothing seems to work.

Below is my CSS code:

#imageshown{
position:absolute;
z-index:1;
width:1000px;
height:600px;
background:#000;
opacity:0.8;
}

#imageshown > img{
opacity:1;
z-index:2;
position:relative;
top:15px;
width:450px;
height:450px;
margin:0 auto;

}

#image_content{
opacity:1;
z-index:2;
position:relative;
top:15px;
width:450px;
height:100px;
margin:0 auto;
background:#FFF;
 }

#exit{
position:absolute;
border-radius:50px;
background:#006;
opacity:1;
top:-5px;
left:-5px;
z-index:2;
color:white;
text-align:center;
width:30px;
height:30px;
}

In addition, here is my jQuery code:

$("#imggroup img").click(function(e) {
    $(document).find(".NewElement").remove();
    var ImageElement ="<img src=\"" + $(this).attr("src") + "\" alt=\"image shown\" />";
    var DivContents = "<div id=\"image_content\"> blah blah blah </div>";
    var Exit = "<div id=\"exit\" > X </div>";
    var ElementWrap = "<div id=\"imageshown\" class= \"NewElement\"> "+ ImageElement + DivContents+ Exit+"</div>";
    alert(ElementWrap);
    $("#container").prepend(ElementWrap);
});

Although I have implemented a function for exiting the lightbox as well, I am encountering issues with being able to click on it.

Answer №1

When you give a parent element opacity, it will affect all of its children regardless of their individual opacity settings. For example, setting opacity: 0.8 on the parent container will apply that same opacity to all child elements.

To create transparency on an element without impacting its children, you can use a transparent background color:

#imageshown {
    background:#000; //keep this for IE8 support
    background: rgba(0,0,0, 0.8);
    //opacity:0.8; remove this
}

If you need transparency in older versions of Internet Explorer, you can use a fallback method explained here: http://css-tricks.com/rgba-browser-support/.

#imageshown { 
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000); //adjust transparency using hex values
    zoom: 1;
} 

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 Node.js application is unable to locate the source file path

Currently, I am in the process of creating a simple quiz application. While working on this project, I encountered an issue with linking a JS file in an HTML template. Even though I have confirmed that the path is correct, every time I run my node app, the ...

Effortlessly move and place items across different browser windows or tabs

Created a code snippet for enabling drag and drop functionality of elements within the same window, which is working smoothly. var currentDragElement = null; var draggableElements = document.querySelectorAll('[draggable="true"]'); [].forEach ...

Aligning a div in relation to the background image

I am seeking guidance on how to center a Div Box and make it responsive relative to the background image. The div box should be contained within the white box, similar to the example shown here: body{ font-family: 'Roboto Mono', monospace; ...

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

I need to resize an image that measures 1024x1024 and is segmented into 4 quadrants: My goal is to reduce the size of this image so that quadrant 2 is 256x256 while masking out or hiding the remaining 3 quadrants, displaying only the desired section on th ...

Why does the <div> element still have an offset even though its width and height are set to 100px and padding, margin, and border are set to 0px?

After styling my div element with specific CSS rules, I'm encountering an issue. The div has a set width and height of 100px along with padding, border, and margin all set to 0px. However, the elements are not being offset from the edges of the browse ...

Reactively created menu using JQuery

Looking to implement a dynamic JQuery menu using React (ES6). Utilizing the JQuery menu examples (https://jqueryui.com/menu/) as a guide, however, those examples only cover static menus. It doesn't clarify how to modify menu items like updating labels ...

HTML and JQuery Image Slide Show

Help! I'm struggling with this image slider that's meant to showcase images fading in and out every 5 seconds. Being a beginner in coding, I could really use some assistance with getting it to work properly. Currently, I'm stuck on the firs ...

The functionality of jQuery click events seems to be disabled on the webpage, however, it is working perfectly fine on jsFiddle

After thoroughly checking the js tags and ensuring everything is properly closed, it's frustrating when the JavaScript suddenly stops working. The code functions perfectly in JSFiddle, leading me to believe that the issue may lie with something I&apos ...

The arrangement of elements varies based on the type of display

I'm still learning HTML and CSS, and I've noticed that the layout of my elements changes depending on the screen size. Everything looks good on my 24" monitor, but some elements overlap on my 15" laptop screen. What could be causing this issue, ...

Convert jQuery Array Serialization to PHP

How can I retrieve data from an AJAX request made with jQuery in PHP? $('#form').on('submit', function(event) { var slider_item = $('.slider .owl-page'); if(slider_item.hasClass('active')){ var attr ...

Discover the contents within #document utilizing PUPPETEER

Can someone assist me as I am new here? I am trying to retrieve elements from a virtual reference #document in HTML using Puppeteer, but every time I attempt it, I receive an error stating that the element does not exist. Here are some examples: HTML &l ...

Pagination in jQuery EasyUI datagrid does not function properly when using the appendRow method

I have been using the jeasyui datagrid with pagination for a while now, but I recently came across a requirement where I need to add data from a form upon clicking the "Add Data" button. Everything is working perfectly fine, except that the pagination is n ...

Using jQuery, compare the values of two elements and update the class based on the comparison outcome

My objective is to retrieve data from a database, place it into an <li> element, and then highlight the larger of the two values obtained from these HTML <li> elements. I have created a jsfiddle, but I am uncertain about how to use the addCla ...

"Effortless CSS Formatting in VS Code - A Guide to Automatic Styling

Recently started using VS code and I'm on the lookout for a solution to automatically format CSS whenever I save my work. Strangely, my searches haven't led me to any reliable extensions or clear guides on how to achieve auto formatting in VS cod ...

What is the syntax for implementing conditional statements within the style jsx of Next.js?

Recently, I've been exploring the use of <style jsx> in my Next.js project and encountered a scenario where I needed to style an element based on a conditional statement. Additionally, my project relies on tailwindCSS for styling: <div classN ...

The nested ThemeProvider takes priority over the theme's style definitions

Is there a way to render a component and then apply additional rendering using useEffects in React? The issue I am facing is that when I have a component with a specific theme, each useEffect call ends up overriding the style of the original component wit ...

What is the reason behind jQuery's .html("abc") only providing temporary insertion?

I have come across an issue with an HTML button that triggers a function. Whenever the button is clicked, a div is inserted but it only appears for a brief moment before disappearing both visually and in the HTML tree. function openBox () { $( '#0&a ...

When the header is given a fixed position, the modal becomes unattainable

I am currently working on developing my personal news website called News Pews. This is my third project, and I have encountered an issue that was not present in my previous projects. The problem arises when I apply position: fixed; top:0; to the header c ...

Executing PHP scripts using Ajax

Check out the code snippet below: <?php //echo $this->Html->css(array('bootstrap', 'mark', 'style')); echo $this->Html->script(array('timer','swfobject','bootstrap.min.js')); // ...

The property mentioned was attempted to be accessed during the rendering process, however it is not defined on the instance

I am currently facing four main errors that I need to resolve while working with Vue 3: https://i.sstatic.net/23ir7.png Despite everything else working correctly, my code seems to have issues specifically with user inputs. //############--contact.js-- ...