problem arising from the box shadow and transparent areas of an image

I'm facing an issue while attempting to apply a box-shadow effect on my image. The problem arises due to certain transparent parts of the image causing unexpected results with the box-shadow. To better understand the situation, refer to the code snippet below:

.framed-image {
    background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat;
    background-size: cover;
    padding: 18px;
    object-fit: cover;
}

.image-menu {
    width: 300px;
    height: 200px;
    background-size: 100% 100% !important;
    -moz-box-shadow: 0 3px 8px rgb(136, 136, 136);
    -webkit-box-shadow: 0 3px 8px rgb(136, 136, 136);
    box-shadow: 0 3px 8px rgb(136, 136, 136);
}
<div class="image-menu-parent">
            <img class="framed-image image-menu" src="http://placehold.it/1/365f83">
        </div>

The visible white background in the transparent areas of the image is posing a challenge for applying the box-shadow correctly. How can I rectify this issue and ensure the proper utilization of the box-shadow? Your assistance is highly appreciated! ♥

htmlcss

Answer №1

You have the option of utilizing the filter property in combination with drop-shadow.

To know which browsers support this feature, refer to this comprehensive list.

.framed-image {
  background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat;
  background-size: cover;
  padding: 18px;
  object-fit: cover;
}

.image-menu {
  width: 300px;
  height: 200px;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}
<div class="image-menu-parent">
  <img class="framed-image image-menu" src="http://placehold.it/1/365f83">
</div>

Here is another example:

.framed-image {
  background-size: cover;
  padding: 18px;
  object-fit: cover;
}

.image-menu {
  width: 300px;
  height: 200px;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}
<div class="image-menu-parent">
  <img class="framed-image image-menu" src="http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Bald-Eagle-PNG-Transparent-Image.png">
</div>

Answer №2

To be succinct, achieving a transparent shadow effect with box-shadow might not be possible as it surrounds the image and doesn't interact well with transparencies. One alternative would be to incorporate a drop shadow directly into the image for the desired visual impact.

Answer №3

.framedImage {
    background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat;
    background-size: cover;
    padding: 18px;
    object-fit: cover;
}

.image {
    width: 300px;
    height: 200px;
    background-size: 100% 100% !important;
    filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}
<div class="parent">
   <img class="framedImage image" src="http://placehold.it/1/365f83">
</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

Only one specific SVG tag is affected by the CSS stylesheet

I'm encountering an issue with my web page that has multiple SVG tags. Each SVG tag includes a block of style tags containing CSS styles for the respective SVG element. The problem is that these styles seem to leak into the overall global styles. For ...

csshtmlsvg

How to move content without affecting the background of the `<body>` using scrolling

Can I achieve a glass morphism effect on my page without moving the background of the body? I only want to move the .container. Is this feasible? I attempted using background-attachment: fixed, but it did not work for me. Here is the code snippet I have be ...

htmlcss

The Django framework does not apply color to the Bootstrap Navbar as expected

I'm currently working on building an E-Commerce Website using Django. I have implemented a Bootstrap navbar, but the CSS styles that I obtained from this source are not functioning properly when placed within the {%block css %} tag. I have attached t ...

htmlcssdjangobootstrap-4

Adding constantly changing information into unchanging HTML

My goal is to dynamically insert content from a Database into a static HTML file. I have successfully achieved this on the client side using JavaScript. Specifically, I need to retrieve values from the Database and place them in designated fields within t ...

c#html.netasp.net-mvc

Attempting to update the content of a specific div element on a webpage without disrupting its current position

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ajax div example</title> <script type="text/javascript" src="jscripts/jquery-1.6.4.min.js" ...

ajaxhtmlpositionrefreshcss-float

I keep encountering an issue with getJson

A snippet of my JavaScript code retrieves a JSON object from a URL. Here is the portion of the code in question: <script> $(document).ready(function(){ $("button").click(function(){ $.getJSON('url_address', {}, function(data) { ...

javascriptjqueryhtmljson

What is the best way to vertically align a pseudo element image using CSS?

After looking for similar questions, none of the answers seem to be working for my specific issue. This is what I'm struggling with: I am attempting to insert and center a decorative bracket image before and after certain content in the following man ...

cssvertical-alignment

How to dynamically style NavLink using a variable in react-router-dom with Emotion?

Is there a way to extract styles to a variable when using react-router-dom's NavLink activeStyle prop? I want to avoid repeating the same styles without using a css file. Ideally, I would prefer to achieve this using Emotion, but if that's not f ...

cssreactjsreact-routerreact-router-domemotion

Comparing the use of jQuery's data() method versus directly accessing attributes with native JavaScript using get

I want to retrieve general information from my website using javascript. I have a few different options available: I could use an html element: <input type="hidden" value="MyValue"/> Another option is to use a custom attribute in an existing h ...

javascriptjqueryhtml

Positioning the filters in jQuery Datatables

I'm currently working with jQuery datatables and I'm attempting to align the filter/search box on the same row as the header of the container holding the datatable. Attached is a screenshot for reference: https://i.stack.imgur.com/nzbIl.png He ...

javascriptjqueryhtmlcssdatatable

What is the best way to present both paragraphs and images from a div in a sequential order

Currently, I am developing a compact web tool to assist editors in creating content by utilizing buttons to insert paragraphs and images. The elements are saved with an ID (beginning at 0 and increasing for each new element) and can be previewed in a div n ...

javascripthtmlcss

Common Error for Novice HTML/CSS Learners

I am currently enrolled in an introductory web design course on Treehouse, and I have encountered a problem with centering a class in HTML using CSS. Despite following the instructions closely, my code is not displaying correctly. Can someone please review ...

htmlcss

What causes the entire webpage to shift when adjusting the margin-top value?

As I work on creating this website based on a tutorial, it's clear that I am still in the learning stages. Unfortunately, the tutorial didn't provide an explanation for the unexpected behavior I'm experiencing. Here's the CSS code snip ...

csshtml

Entering in full screen mode

Is there a way to create a first screen appearance that spans the entire screen? I want the whole page to be fullscreen and when someone scrolls down, it transitions to a new screen. I am struggling to find a solution for this. body { margin: 0 0 0 0; ...

htmlcss

Choosing a Webpage Navigation Tab with Excel VBA

Having trouble selecting one of the navigation tabs on a webpage, even after coding for ID, password, and other screens. I've tried various combinations of "GetElementBy" without success. The tabs don't seem to be in their own frame. Here is the ...

htmlcssexcelvbainternet-explorer-11

Is it possible that the Divi blurb module fails to extend to the full height of the row?

I frequently use Divi blurb modules, as seen here: - positioned at the top of the page, just below the header. However, I am facing an issue with getting them to be consistent in height. The 'database generation' module appears shorter than the ...

htmlcsswordpressdivi

Troubleshooting overlap problem between Skrollr and SlickNav

I successfully implemented Skrollr to fix images, similar to this example: Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image. Despite trying various ap ...

javascripthtmlcssskrollrslicknav

Creating a wide-ranging megamenu with CSS only

I am interested in creating a full-width Mega menu. Here is the link for reference: http://codepen.io/tanmoy911/pen/KzjVdq My CSS code follows a 12 column grid system. .fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden} .fui-navbar li{fl ...

htmlcss

I'm having trouble figuring out how to perfectly center this div on all types of devices

As someone who is new to css, I have been struggling to center these divs in the middle of the page across all devices despite searching extensively online and trying various solutions without any success. Check out my code below: Snippet: :after, :be ...

htmlcss

Creating a two-column post loop in Wordpress is a great way to display content in a

I've been attempting to separate posts for a long time without success. No matter what variations I try, the result is always either a single post or duplicating all of them. In other words, multiple posts are not displaying as intended. If anyone ha ...

phpcsswordpress