Can the CSS be used to conceal the PNG image while still preserving the drop shadow effect?

I recently applied the "Filter: drop-shadow" effect to my png photo and it worked perfectly. However, I am now interested in hiding the actual png image while retaining the shadow effect.

My initial attempt involved adjusting the translate and drop-shadow x-axis values in the CSS code below:

I also contemplated achieving this through Photoshop. Is there a way to directly hide the png image using CSS?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --distance: 100vw;
}

.photo {
  width: 100%;
  filter: drop-shadow(var(--distance) 10px 5px #ff0000);
  position: relative;
  display: block;
  transform: translate(-100%, 0%);
}
<div>
  <img src="nba.png" alt="..." class="photo">
</div>

htmlcss

Answer №1

In line with user @Behrouz's suggestion, a simple method is to place the image inside a div element with a drop shadow effect applied. Check out the code snippet below. The drop shadow will remain visible even when there is no image present, allowing you to adjust the box-shadow property as needed.

.photo-shadow { 
width: 300px;
height: 300px;
box-shadow: 5px 5px 5px rgba(0,0,0, 0.6);
margin-bottom: 20px;
}
<div class="photo-shadow">
<img src="https://via.placeholder.com/300" />
</div>

<div class="photo-shadow">

</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

Updates made to the Transform property in Mui Theme are not appearing in the browser

I'm looking to modify the MuiInputLabel.outlined. While I can see various changes when inspecting in the browser, I'm having trouble seeing the transform property change specifically. This is the current configuration of my MuiInputLabel: MuiInp ...

cssreactjsmaterial-ui

What are some ways to enhance the loading time of my PHP-powered website?

Having troubles with my PHP-driven website that showcases real-time stock market data due to slow loading speeds. The site utilizes PHP for scraping financial information from external sources and presenting it on the front end. However, the performance is ...

javascriptphphtml

Storing HTML table data in a MySQL database will help you

Operating a website focused on financial planning where users can input various values and cell colors into an HTML table. It is crucial to uphold the integrity of these HTML tables. How can I store the complete HTML table (including values and colors) i ...

javascripthtmlmysqldatabase

Ways to implement border spacing using CSS

Here's a snippet of the code I've been working on: HTML: <html> <body> <div id="article"> <h1>TITLE</h1> <p>text</p> </div> </body> </html> CSS: #article { colo ...

htmlcss

Basic click event triggered every second click in JavaScript and HTML

onclick="HandleAction(\'playnow\');HandleAction(\'stop\');" This element performs two functions simultaneously. However, it only executes the actions \playnow\ and then \stop\ immediately after. ...

javascripthtml

Transferring a dynamic HTML file created using R's animation package onto a WordPress platform

After using the animation package in R to create an HTML file, I'm facing some challenges uploading it to my WordPress blog. It appears that additional js or css files may be required for proper functionality, but I'm uncertain about the process. ...

javascriptcsswordpressr

Is it possible to place an open div panel between two tweets?

I'm in the process of developing a UI with Twitter feeds. I want to create a feature where a panel can be opened between two tweets, causing the tweet below to shift downwards. This function is commonly seen in tweet clients like TweetBot; as each new ...

javascriptjqueryhtmltwitter

The modal dialog feature in HTML5 and CSS3 seems to be experiencing some issues when used in Opera browser

This informative post provides a detailed tutorial on creating a modal dialog using only HTML and CSS3. For more information, visit: To see a working demo, click here: The modal works flawlessly in most browsers, but some users have reported issues with ...

htmlcss

The outcome of the JQuery function did not meet the anticipated result

Here is the code I am using: $("p").css("background-color", "yellow"); alert( $("p").css("background-color")); The alert is showing undefined instead of the expected color value. I have tested this code on both Google Chrome and Firefox. Strangely, it w ...

javascriptjqueryhtmlcss

Need help incorporating a "section trail" into your website's navigation sidebar using JS/jquery? Here's how you can do it!

My website is quite extensive and contains numerous elements. There are times when I find myself wanting to navigate back and forth between different sections of the page. I've noticed that some websites have a feature called a "page trail," which di ...

javascriptjqueryhtmlcss

Tips on formatting vueJS HTML5 with tidy without compromising its structure or content

Using the tidy tool on this VueJS code causes it to completely break: Here is the initial VueJS HTML code: $ cat sample_vue.html ... <tbody> <tr v-for="task in tasks"> <td><strong>{{task.title}}< ...

htmlvue.jsvuejs3tidy

Locating the value of a data attribute from a distant parent div using jQuery

How can I access the closest div from an anchor tag that has a data-id attribute without using multiple parent() methods? Even though .parent().parent().parent() works, I am trying to find a better solution. <div class="panel panel-default" data-id="@ ...

javascriptjqueryhtmljquery-selectors

The div swiftly clicks and moves beyond the screen with animated motion

Here is a code snippet that I am working with: $(document).ready(function(){ $(".subscriptions").click(function (){ if($(".pollSlider").css("margin-right") == "-200px"){ $('.pollSlider').animate({"margin-right": '+ ...

javascriptjqueryhtmlcssjquery-ui

Changes to attributes of an HTML tag cannot be made by jQuery code during an AJAX call

Could someone help me figure out why this jQuery code is not functioning properly? I have already tested it outside the $(document).ready block with no success. Note: The unusual "{{ }}" and "{% %}" syntax is typically used in Django. jQuery $(document) ...

javascriptjqueryhtmldjango

Tips for creating a form with recurring elements efficiently

Currently struggling to summarize the issue at hand with a simple title, so here's the detailed explanation: Imagine I'm inputting information for multiple contacts, and there are various fields involved: Name of the contact Method of Contact ...

jquerypythonhtmlflaskwtforms

Is it possible to incorporate a LINK within the CSS GRID layout?

Hey everyone, I've encountered an issue with my link placement in the grid. I'm looking to turn the entire box into a clickable link. * { padding: 0; margin: 0; } body { font-family: Hiragino Kaku Gothic Pro W3, Arial; } .title-conta ...

htmlcsscss-grid

Issue with margin-top on <p> and <a> elements not displaying correctly?

I've been attempting to incorporate margin-top for a link button, but unfortunately it's not working as expected. I've even experimented with inline styles for both the 'p' and 'a' tags. There are three list elements, I ...

htmlcssmargin

Can HTML tag attributes be accessed in CSS within the Shadow-DOM?

As I work on developing a custom component using StencilJS, I find myself needing to adjust the outline behavior when users navigate through it with either a keyboard or mouse. My component employs ShadowDOM and I aim to extract an HTML tag attribute from ...

htmlcsstypescriptshadow-domstenciljs

Transfer data from a div to JavaScript

Within a php file, there is a div in which an id and some data are returned. Take a look at the code: <div id="dom-target" style="display: none;" data-stuff="2017, 8, 20, 0, 0"></div> So, I am trying to retrieve the value of data-stuff and pa ...

jqueryhtml

Creating a personalized input slider: A step-by-step guide

I have a question about how to design a custom input slider with the label inside the field itself. The desired output should look like the screenshot below: I have successfully created the input field part, but I am struggling with adding the label and ...

javascripthtmlcss