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

Is using readonly attribute for HTML inputs a security concern?

Is it reliable to trust the data from an html input field set to readonly? What exactly is the purpose of using a readonly field in a form? I understand that disabled fields are not included in $_POST, but what about readonly fields? I need a way to have ...

phphtmluser-inputvalidation

Is there a way to retrieve content in tinymce from a JSP file and send it to a servlet that then redirects to a different page

I need guidance on how to store the content from the tinymce editor and post it with a new page creation. What steps should I take? ...

jqueryhtmlajaxjspservlets

CSS: Styling different <a href> tags to appear uniform within identical size containers

I currently have some links displayed on my webpage. These links are encapsulated within a border and have a background set for them, essentially creating a box around each one. <!DOCTYPE html> <style> a { background: #DDD; border: #BB ...

css

Is there a method to stop a mobile device from rotating my responsive website on mobile devices?

Currently, I am in the process of developing a mobile responsive website and I'm aiming to prevent any rotation on Safari specifically. Is there a way that I can achieve this without affecting other browsers like Android? ...

htmlresponsive-designmobile-safariweb-deploymentmobile-website

Button click not functioning to switch the displayed image in Javascript

As a beginner in Javascript, I'm attempting to create a basic button in html that switches the originally shown image when clicked. Unfortunately, my current code isn't functioning properly. Could someone please assist me in identifying the mista ...

javascripthtmlimagebutton

Creating your own personalized menu in PHP

Although I am relatively new to PHP, I have successfully developed a membership framework for my website that is fully functional. However, before diving into the design phase, there is one particular thing I am keen on achieving but unsure of how to go ab ...

phphtmlmenuhyperlink

Ways to prevent a particular link from functioning in HTML or JavaScript

Hey there, I am currently using a Gchat voice and video chat script. Check out my website if you're interested. The issue I'm facing is that someone logs into my chatroom and uses this flash link to crash other users' browsers. Whenever th ...

javascriptjqueryhtml.htaccess

Is there a method to increase the vertical length of a ::before pseudo-element within a fixed container?

One issue I'm facing is that the ::before selector doesn't extend vertically in a fixed element. Does anyone know of a way to ensure the background fills the entire height? Currently, when a user scrolls, the ::before elemeent stops once the use ...

csssass

Covering a secret link with a backdrop image

I have set a background image in a column on my WordPress site. However, I want to make this image clickable by placing a transparent box over it, as background images cannot be linked directly. #container { background-image: url(https://www.quanser.c ...

htmlcsswordpress

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

What is the way to change the background color using HTML5 getItem?

Here is the code I am currently using: $(this).css('backgroundcolor', localStorage.getItem('bgColorr') + " !important;"); When I execute this: alert( localStorage.getItem('bgColorr') + " !important;"); I receive the correc ...

jquerycsshtmllocal-storage

Automatically refresh a table within a webpage with updated database information without the need to manually refresh the

I'm a beginner in PHP and AJAX. The issue I am currently encountering is displaying a table on a JSP page and wanting to auto-update the table without refreshing the page every 10 seconds. I retrieve values from a database using a PHP page Below is t ...

phphtmlajax

Rotate images every 5 seconds, pulling them directly from the server

I am looking to update the users every seven seconds on my website. To do this, I need to retrieve all user information from the server using JavaScript. What is the most efficient way to accomplish this task? My initial thought is to send an HTTP request ...

jquerypythonhtmldjango

Is there a way to access comprehensive data pertaining to an ID through Ajax?

I need help with an Ajax call. Below is the code I currently have: $.ajax({ async: true, url: 'test/', type: 'POST', datatype: 'text json', data: { id: id, }, success: function(data) { // Retrieve the da ...

javascriptjqueryhtmlajax

Tips for animating input width as the size value changes during an ajax query transformation

This is my JavaScript code: function updatePriceDisplay() { $.ajax({ url:"query.php?currency=<?=$currencycode;?>" }).done(function(data) { $("value").attr("value", data).attr("size", data.length - 2); }); } updatePriceDi ...

javascripthtmlajax

Animate elements in Vue.js when navigating between pages is a great way to enhance user

I'm looking to add animation to a specific element once the route page finishes loading. This is not related to route page transitions. I've experimented with various methods, trying to animate a progress bar based on dynamic data values. I attem ...

javascriptcssvue.jsfrontendvuejs2

Shift content from side to side with a click

I've been attempting to shift content left and right using an onclick event and I need it to stop at the margins on the left or right. The list-items are generated dynamically. Here's the code I've tried so far, but it's not quite worki ...

javascriptjqueryhtmlonclick

Is there a way to remove deleted SASS styles from the generated CSS?

Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...

cssionic-frameworksass

How can I dynamically pass a background:url using JavaScript to CSS?

I have a CSS code snippet below that I would like to dynamically change the "background:url" part using Javascript. div{ background: url('pinkFlower.jpg') no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

javascriptjqueryhtmlcss

The communication factor that triggers the expansion of the mother element

I've been struggling with this issue for quite some time. Here is the challenge at hand: I am in the process of developing a library to streamline AJAX calls and neatly display error messages directly within a form. The dilemma: Whenever the messag ...

htmlcss