Show a shadow-box effect around elements inside.ORPresent a

Looking to showcase a list of elements within a container div that features an inner shadow box. However, the issue is that the shadow box appears beneath the contained elements, creating an unappealing look.

https://i.sstatic.net/Get3w.png

After some research, I came across this solution which offers a workaround. But the challenge remains as I need to enable scrolling inside the container since the contained divs might overflow.

Is there a way to have the shadow display over the contained divs while still maintaining scroll functionality?

css

Answer №1

If you're looking to achieve this without providing source code, one alternative method could be:

.container {
    box-shadow : inset 0 0 5px 0 black;
    height:200px;
    position :relative;
    overflow-y: scroll;
}

.inner-content {
    background : rgba(0,0,0,0.2);
    height:1000px;
    width:200px;
    margin:auto;
}
<div class="container">
    foo
    <div class="inner-content">bar</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

A sleek and modern fixed navigation bar in Bootstrap 4 featuring two elegantly stacked rows, with a striking brand image perfectly centered

I need help creating a Bootstrap 4 fixed navigation bar with 2 rows. The first row should have a centered brand image like the one on (with the image size changing after scrolling down), and the second row should contain the navigation menu. Thank you i ...

htmlcssbootstrap-4

Jquery and CSS3 come together in the immersive 3D exhibit chamber

Recently, I stumbled upon an amazing 3D image gallery example created using jQuery and CSS3. http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/ Excited by the concept, I attempted to incorporate a zoom effect (triggered every time a user clic ...

javascriptjquerycss

"Kindly complete all mandatory fields" - The undisclosed field is preventing me from submitting

I am facing an issue with my WordPress page that has Buddyboss installed along with Elementor pro as the Pagebuilder. The Buddyboss plugin provides Facebook-like functions on the website. While it is easy to comment on posts within the Buddy Boss system, I ...

javascripthtmlcsswordpressblogs

Issue with resetting column widths in Datatables

I am trying to set the maximum width for a datatable with a fixed header using JavaScript. Below is the JavaScript code snippet I am using: var oTable = $('#example').DataTable( { "sScrollY": 200, ...

jqueryhtmlcssdatatables

Looking for help with aligning an icon to the right side of my text

I'm struggling with aligning the icon to the right of the quantity. When I use float:right, it places the icon at the far right of the cell instead of next to the text. Is there a way to get it to be on the right side of the text but directly adjacent ...

htmlcssangularjsangular

Using jQuery to gradually fade out my sidebar (div)

I have written the following code to hide my sidebar when the screen width is less than 1024 pixels, but it doesn't seem to be working. It worked fine on a previous website, so I'm not sure what the issue is here. Any help would be greatly apprec ...

javascriptjqueryhtmlcssfade

Utilize CSS exclusively to position the div

Trying to achieve a specific layout, which can be better understood by checking out this fiddle: https://jsfiddle.net/zbh8ewqg/ The goal is to align the #inner div in such a way that its top matches with the top of the #outer div. While this might be fe ...

htmlcsscss-position

Setting a specific time for a div element with opacity: A step-by-step guide

Is there a way to adjust the timing for the appearance of the add-to-cart when hovering over the product-list-item? Currently, it appears when I hover over the item and disappears when I move my mouse away. .product-list-item { position: relative; w ...

javascripthtmlcss

Sliding through HTML content

Unfortunately, I lack expertise in advanced HTML and CSS. After some investigation, I attempted to create a "content slider" similar to the one on the Redlight Traffic website (an anti-human trafficking organization). However, my efforts have been unsucces ...

javascripthtmlcssjscript

Is there a bug in Firefox concerning the accuracy of document.body.getBoundingClientRect().top?

When I access Firefox version 17.0.1 and request document.body.getBoundingClientRect().top; on a simple site with no CSS styling applied, it returns an incorrect value. Instead of the expected 8, which is the default for the browser, it shows 21.4. However ...

javascripthtmlcssfirefox

Click on the 'appearance' dropdown menu while using Safari or Chrome on a Mac computer

Struggling to achieve uniform appearance for the select box across all browsers and devices? It seems like IE 10 and Microsoft Edge are giving you trouble with the appearance property. Any suggestions on how to fix this issue would be greatly appreciated. ...

htmlcssmacosgoogle-chrome

Can flexbox elements be animated as they scroll?

Wondering if it's feasible to animate flex elements upwards when scrolled? Attempting to replicate this effect: https://codepen.io/Sergiop79/pen/bxjGEe I want to apply this to the elements below (styled in flexbox), either the entire "row" or each i ...

javascriptcssflexboxcss-transitions

The bottom of the page showcases the menu element

I have been utilizing Bootstrap to display a navigation bar: https://i.sstatic.net/P9maf.png In the provided screenshot, you can observe that the first menu item is positioned at the lower level compared to the rest of the menu elements. Below are the CS ...

htmlcsstwitter-bootstrap

Tips for Aligning Several Images Horizontally in an Article

Does anyone know how to center pictures in an article horizontally? I've tried various techniques without success. If it would be helpful, I can share the CSS I currently have. However, I am open to starting from scratch with the CSS as well since I ...

csshtml

Arrange flex list items in vertical rows on smaller screens for a more organized layout

Struggling to have CSS flex list stagger text on two lines for smaller screens, but so far, my attempts have failed. I've tried using spans and br at various media queries, but nothing seems to work. Any assistance would be greatly appreciated. This ...

htmlcssflexbox

how to position one div above another using css

I currently have a page layout with 7 different div elements structured like this; <div id="container"> <div id="head"></div> <div id="A"> <div id="A1">A1</div> <div id="A2"></div> ...

css

Ways to apply the margin-top property to create space between an input field and

I have been experimenting with Vue and I created a simple code snippet. <template> <div> <input /> <span class="span-text">Hi</span> </div> </template> // index.css .span{ margin-top: 3px; } I a ...

cssvue.js

Hovering over a td tag and adding a border using CSS can cause the entire table to

While experimenting on a coding platform: <table> <tr> <td class="changeme">something</td> <td>something</td> <td>something</td> <td>something</td> < ...

htmlcsshoverborderhtml-table

Customizable styling using SQL and PHP

I've reached a dead end with this issue. Here's the current situation: When User 1 clicks "not available," the background of a div turns red and updates on all other users' screens. CSS: #User1 { background-color: green; <--This is ...

javascripthtmlcss

"Utilizing CSS to Format Academic Publications in the Style of APA Guidelines

Is there a way to automatically format a list of academic papers for an updated page using CSS rules? I want to style published articles similar to the following example: https://i.stack.imgur.com/jO56V.png I don't want to manually enter &nbsp;& ...

htmlcss