Is it possible to achieve a stacked-element box-shadow effect with just CSS?

Currently, I am working on a UI element that needs to signify that the represented item will expand into multiple items later in the workflow. My idea is to make it visually distinct like this:

The actual image used will always be different.

If the element falls under this category, it will receive a special class called expandable-slide. This is just an alpha version of the application, so I'm not looking to invest a lot of time adding new HTML and widgets. However, since it's Sunday, I'm open to experimenting and seeing if we can achieve this effect using only CSS.

I've realized that the stacking effect is quite similar to a box-shadow, but with multiple shadows featuring slightly different colors and offsets. I'm currently exploring this approach to see if it will work.

The browser requirements are modern versions of Chrome and Firefox.

csscss-transforms

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

Position SVG separator below header with video background

I'm in the process of creating a hero background and I want to make sure that my svg divider is positioned beneath the video to seamlessly blend into the background below. Currently, it's showing up right next to the buttons, which is not the de ...

htmlcss

The challenge of resizing dialog elements in Angular Material

I am currently working on developing a text dialog for my app that will be reused frequently. The text dialog consists of a header, a message displayed above the text input, the text input area, and "Ok" and "Cancel" buttons. Upon my observation, I have f ...

htmlcssangulartypescript

Eliminating undesired borders of table cells using CSS

I am facing a unique and puzzling issue. Here is the simple markup: <table> <thead> <tr><th>1</th><th>2</th><th>3</th></tr> </thead> <tbody> <tr>< ...

htmlcsshtml-table

Separate the footer of a Bootstrap 4 card into two distinct sections

I am currently working with the footer system in bootstrap 4 and I have a specific requirement. I need to place two buttons next to each other in the footer, filling the available space. Here is an example of what I am trying to achieve: see here for curr ...

htmlcssbootstrap-4

Display title of link in mobile navigation menu

I would like to incorporate icons in my navbar instead of text, with the option for the title to be displayed on hover. The "title" text currently displays correctly on both mobile and desktop versions. However, on mobile display, I want the title text t ...

htmlcssbootstrap-4

Why isn't the background image showing up on iOS devices when using the slider?

The website's background image displays on all devices such as laptops and Android phones, but not on iOS mobile devices. I even resized the image to 768px * 365px, but it still doesn't work. .bg-img { position: absolute; left: 0; ...

htmlcsstwitter-bootstrap-3bootstrap-4

Toggle class based on the open status of a div element

I am working on some HTML code that utilizes the following jQuery script: <nav class="navigation"> <ul> <li class="has-sub">iPad <i class="fa fa-angle-down"></i> <ul class="sub-menu"> ...

jqueryhtmlcss

The offspring elements are positioned outside of the main footer element

There seems to be an issue with my <footer>. All child elements of the <footer> are appearing outside of it. Does anyone know how I can properly place child elements inside the <footer> and align them from left to right? footer{ bac ...

htmlcss

picture positioned ahead of the text container

I am looking to add an image or icon in front of each label in my pricing table. I am considering using the :before pseudo element, but the most important thing is that the image maintains its proportions and stays within the height of the span. The height ...

htmlcss

The contact us page's layout issue cannot be resolved by adjusting the left and right borders of the parent div

https://i.sstatic.net/Gj7mQ.png <div class="col s1 m-5" style="background-color: white"> <div id="gd1" style="background-color: aqua;width: 100%;align-items: center;height: 20%;border-radius: 1% 1% 0 0;margin ...

htmlcssbootstrap-5

Struggling to accurately differentiate between a CSS and Bootstrap code

I'm attempting to create a visually appealing underline under the active tab, but I am facing challenges in targeting the specific class. Since I am utilizing bootstrap and unable to adjust the width and margin of text-decoration or recognize an eleme ...

htmlcsstwitter-bootstrap

Two divs are overlapping when the screen size is decreased

Here is a basic HTML webpage that has responsive design, with the exception of one div (goplay) that overlaps other elements on the page when the screen size is reduced instead of moving below the image. This webpage uses an external stylesheet for stylin ...

htmlcss

Doing a Right click operation in Selenium is a simple and effective way to interact

I am facing an issue with a rect tag. Although I have successfully located its position, I am unable to perform any operation when I right-click on it. Is there a solution for this problem? <rect class="" stroke-dasharray="" vector-effect="" height=" ...

cssselenium

Expand the image background to fit within a div container

Below is the code snippet I am working on: <div id="intro_section_upper" > <%= image_tag("video_background.jpg", :id=>"video_bg") %> <div id="video_table_main" > <table class=" ...

htmlruby-on-railscss

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

I have encountered a situation where I need to change the HTML link values from UPPERCASE to LOWERCASE and then apply a capitalization style. The problem lies in the fact that the links arrive in uppercase, so I had to come up with a workaround: The given ...

javascriptjqueryhtmlcss

Is there a reason why it's not feasible to merge child/descendant and grouping selectors together?

Understanding the rules of constructing selectors that consist of more than one selector can be quite challenging. It seems that sometimes it is possible to create such selectors, which may contain instances of other selectors made up of multiple parts. H ...

htmlcss

Achieve full width for container using flexbox styling

In an attempt to develop a category dropdown menu with multiple columns based on the length of the <ul>, I am facing some challenges. For reference, you can view the fiddle that I have created here. The goal is to arrange each submenu item below th ...

htmlcssflexbox

Covering div with an overlay that remains fixed on top while allowing the page to scroll

In the example below, when you click on the yellow box, an overlay appears and stays fixed in its position. However, when you scroll down, it remains in place due to its fixed position. How can I ensure that the overlay remains on top of the .div even whe ...

javascriptjqueryhtmlcss

Can CSS achieve a similar blur effect on a background image as seen in video production?

On my website, I have a photo section that displays random user-submitted images. I am facing the same challenge of fitting images into a frame, similar to how landscape video is adapted for broadcast television when combined with portrait cell phone video ...

htmlcssimagebackground-imageblur

CSS: The grid-column and grid-row properties are malfunctioning

I'd like to create a grid with one column containing multiple rows of text, and the second column having an equal number of input rows. My initial plan was to create a grid where the number of rows equals the number of lines of text, and then define t ...

htmlcsscss-grid