Implement a shadow effect on a customized image using Tailwind CSS

Can someone help me with this code snippet I have written:

<script src="https://cdn.tailwindcss.com"></script>

<div class="m-6 space-x-3">
  <div v-for="m in media" class="w-[200px] h-[200px] inline-block">
    <img class="object-contain w-full h-full shadow shadow-black" src="http://placekitten.com/200/300">
  </div>
  <div v-for="m in media" class="w-[200px] h-[200px] inline-block">
    <img class="object-contain w-full h-full shadow shadow-black" src="http://placekitten.com/300/200">
  </div>
</div>

After running the code, the output is as shown https://i.sstatic.net/uyTbJ.png

I am facing an issue where the shadow effect applies to the box that holds the image instead of the actual image itself. How can I modify the code to make the shadow apply directly to the image?

csstailwind-css

Answer №1

Consider using drop-shadow instead of shadow for a more stylish effect

<script src="https://cdn.tailwindcss.com"></script>

<div class="m-6 space-x-3">
  <div v-for="m in media" class="w-[200px] h-[200px] inline-block">
    <img class="object-contain w-full h-full  drop-shadow-[0_5px_5px_rgba(0,0,0,0.5)]" src="http://placekitten.com/200/300">
  </div>
  <div v-for="m in media" class="w-[200px] h-[200px] inline-block">
    <img class="object-contain w-full h-full  drop-shadow-[0_5px_5px_rgba(0,0,0,0.5)]" src="http://placekitten.com/300/200">
  </div>
</div>

Answer №2

You have the option to extend the theme and utilize Tailwind internal custom properties to achieve the desired color for the shadow effect.

Here is a demonstration on play.tailwind.

EDIT: Transforming Tailwind sample code into a snippet

/* Tailwind CSS version 3.2.6 | MIT License | https://tailwindcss.com */

// CSS reset styles
...

// Custom utility classes
...
<div class="m-6 space-x-3">
  <div v-for="m in media" class="w-[200px] h-[200px] inline-block">
    <img class="object-contain w-full h-full shadow-blue-400 drop-shadow-custom" src="http://placekitten.com/200/300">
  </div>
  <div v-for="m in media" class="w-[200px] h-[200px] inline-block">
    <img class="object-contain w-full h-full shadow-gray-600 drop-shadow-custom" src="http://placekitten.com/300/200">
  </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

Knockout text binding does not automatically update the width

Recently, I encountered a bug in an ongoing project where the user name was appearing within another element until hovered over with a cursor. Upon further investigation, I discovered that this issue stemmed from the project's usage of Knockout.js. I ...

jqueryhtmlcssknockout.js

Encase a group of child elements within a parent container using

Currently, I am able to wrap an entire li-element in an ordered list with a link: $(e).wrap('<a href="#" onclick="window.open(\'/xyz/\');return false;"></a>'); This is the HTML construct: <li class=""> ...

javascriptjqueryhtmlcss

Unusual phenomenon in ASP.NET: Adding Debug=true in the web.config file results in CSS modifications

As the question suggests: After including debug=true in my web.config file (without making any other alterations to the code), my page is displayed without a background color. Can anyone shed light on why this might be happening? ...

cssasp.netdebuggingweb-config

Use CSS height:auto for every element except SVG

Is there a way to scale all images on my site while excluding SVG files using native CSS? .myClass img { height: auto; } I have tried the following, but it only targets SVG files: .myClass img[src$=".svg"] {height: auto;} Using != doesn't seem ...

css

Tips for employing Flex-grow alongside the behavior of "justify-content: start"

I am working with a flex container setup like this: .container { display: flex; flex-flow: row wrap; justify-content: start; width: 100%; } .item { border: 1px solid red; flex: 1 1 33%; height: 100px; } <div class="container"> <d ...

cssflexbox

Show variously colored information for each selection from the dropdown using Angular Material

I am trying to change the color of displayed content based on user selection in an Angular application. Specifically, when a user chooses an option from a dropdown list, I want the displayed text to reflect their choice by changing colors. For example, i ...

cssangulartypescriptangular-material

Mastering the art of using div boxes in boxing form

When I box in information using divs, I've noticed that sometimes the wrapping boxes don't fill out the space completely. This can result in elements from other wrappers encroaching into the box area. For example: <div> <div style="le ...

htmlcss

As you minimize the browser window, you may notice a white space appearing when scrolling over

Encountering an issue with my webpage where, upon minimizing the browser horizontally and causing overflow, scrolling over to view the hidden section results in a blank page. Any idea why this is happening? I have set my divs to a specific height (e.g. 9 ...

htmlcssstylesheet

When trying to include an external class that extends Pane in a main class in JavaFX, simply adding it may not achieve the

My primary class is as follows: public class Digital_Analog_Clock_Beta_1 extends Application { @Override public void start(Stage primaryStage) { double outerBoxWidth = 500, outerBoxHeight = outerBoxWidth / 2.5; Rectangle outerB ...

javacssjavafx

Modern UI Styling for ASP.NET MVC with Metro Design

I am interested in incorporating the METRO UI CSS into my application: Begin by creating an ASP NET MVC Project To download METRO UI MVC, follow these steps: Package Manager Console: PM> Install-Package Metro.UI.CSS Adjust the bundles to incl ...

c#cssasp.net-mvcasp.net-mvc-4metro-ui-css

What could be causing this Wordpress page to be unresponsive?

I am currently having trouble with the mobile display of a particular website. The site is not rendering correctly on mobile devices. Here is a snippet of the code from the issue: fiddle <div id="contactWrapper">. While the JSFiddle example shows a ...

wordpresscssmobilecontact-form

Display a div with a link button when hovering over an image

Currently, I'm attempting to display a link button within a div that will redirect the user to a specified link upon clicking. Unfortunately, my current implementation is not functioning as expected. I have provided the code below for reference - plea ...

c#javascriptjqueryhtmlcss

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...

javascriptjqueryhtmlcss

I possess three stylish CSS buttons, however, the other one is accompanied by <br />

I'm struggling to ensure that the three CSS buttons are the same size (using padding) and vertically aligned, as the second button includes a "<br />" which throws off the alignment. I was advised to use flexbox, but I haven't been able to ...

htmlreactjscssflexbox

Automated scrolling effect within a container element

I am working on a div container named wrapper2 that houses a chat interface. Inside the container, there are five messages in a div called chatleft, each containing images. The height of the wrapper2 div is smaller than the combined height of all the messa ...

htmlcss

Designing a custom CSS for enhancing the look of the orchard menu

Right now, I am in the process of implementing a layout that is already established in an MVC4 project. I am facing challenges in figuring out how to create a custom menu in the latest version of Orchard (using the source version so it runs in Visual Stud ...

c#.netcssasp.net-mvcorchardcms

CSS: "Cutting-edge" design. In what way?

I am seeking to replicate a design similar to that of Fantastical's website (https://flexibits.com/fantastical), where the edge of a screenshot extends beyond the page boundary. As the user resizes the window, more of the screenshot becomes visible. A ...

jqueryhtmlcssresponsive

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

I'm working on creating a 3-column layout with two text areas. The issue I'm facing is that when I adjust the width of the text areas to create columns, the height shrinks. I need a solution that will be compatible with HTML5 browsers - support f ...

csshtmllayout

Altering the height of cells in a table for HTML emails being sent to Gmail accounts

When attempting to send an HTML email from Outlook 2013 to Gmail, I have encountered a significant gap between the rows. Despite my efforts, I have been unable to adjust the row height. I am seeking advice on how to resolve this issue. Here is the code s ...

htmlcssgmailhtml-email

Is it possible to automatically close navigation dropdowns when the screen size changes?

I am using a bootstrap 4 navbar with dropdowns that open with CSS animation/fade-in on desktop, and a separate toggle button for mobile. Everything works fine, but when I open the dropdowns on mobile and then resize the window screen, they remain open whic ...

javascriptjqueryhtmlcss