A cool CSS technique for adding a subtle inset box shadow to images with the added bonus of centering both vertically and

After discovering a useful trick here to add an inset box-shadow on the images in my gallery, I encountered three challenges:

  1. Difficulty centering the image and surrounding anchor vertically and horizontally in their container
  2. Unable to limit the image height so it remains in the container as I can with max-width
  3. Shadow overflows slightly at the bottom of the image

Check out my current gallery without the box-shadow: https://jsfiddle.net/GaetanL/vLrt7o1m/17/

HTML:

<div class="gallery">
  <div class="picture-frame">
    <img src="https://static.passeportsante.net/i93408-.jpeg">
  </div>
  <div class="picture-frame">
    <img src="https://www.wimadame.com/wp-content/uploads/2019/12/La-nature-me-parle.jpeg">
  </div>
</div>

CSS:

body {
  background-color: purple;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.picture-frame {
  display: flex;
  background-color: white;
  border-style: solid;
  border-color: lightgrey;
  box-shadow: 6px 6px 6px;
  height: 200px;
  width: 200px;
  margin: 0 36px 36px 0;
  padding: 12px;
  border-width: 1px;
}
.picture-frame img {
  max-width: 100%;
  max-height: 100%; /* for chrome & firefox */
  object-fit: contain; /* for edge */
  margin: auto;
}

Here is my progress so far with the issues mentioned above: https://jsfiddle.net/GaetanL/07wmxe6a/24/

HTML:

<div class="gallery">
  <div class="picture-frame">
    <a class="img-shadow">
      <img class="img-image" src="https://static.passeportsante.net/i93408-.jpeg">
    </a>
  </div>

  <div class="picture-frame">
    <a class="img-shadow">
      <img class="img-image" src="https://www.wimadame.com/wp-content/uploads/2019/12/La-nature-me-parle.jpeg">
    </a>
  </div>
</div>

CSS:

body {
  background-color: purple;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.picture-frame {
  background-color: white;
  border-style: solid;
  border-color: lightgrey;
  box-shadow: 6px 6px 6px;
  height: 200px;
  width: 200px;
  margin: 0 36px 36px 0;
  padding: 12px;
  border-width: 1px;
}

.img-shadow {
  position: relative;
  float: left;
}

.img-shadow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}

.img-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: auto;
}

Answer №1

If you're curious, I managed to figure out the solution. It turns out I needed to set a max-height using an absolute value, rather than a percentage. Here is the finalized code: https://jsfiddle.net/GaetanL/07wmxe6a/37/

body {
  background-color: purple;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.picture-frame {
  display: flex;
  background-color: white;
  border-style: solid;
  border-color: lightgrey;
  box-shadow: 6px 6px 6px;
  height: 200px;
  width: 200px;
  margin: 0 36px 36px 0;
  padding: 12px;
  border-width: 1px;
}

.img-shadow {
  display: flex;
  position: relative;
  margin: auto;
}

.img-shadow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 20px rgba(255,0,0,1);
    -moz-box-shadow: inset 0 0 20px rgba(255,0,0,1);
    -webkit-box-shadow: inset 0 0 20px rgba(255,0,0,1);
}

.img-image {
  max-width: 200px;
  max-height: 200px;
}

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

Inline styles are effective, but external stylesheets are not functioning properly (see JsFiddle for reference)

http://jsfiddle.net/xw0vvo9e/4/ Trying to specify a background color for the navBar. In the provided jsfiddle, the CSS includes: div .navBar { width: 100%; height: 45px; background-color: #FF0000; top: 0px; position: fixed; } However, the background ...

what is the process for customizing the default font in tailwindcss?

I recently started a new project using React, and I have integrated a custom font in my index.css file. I have also included the necessary font files. @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; @import url(assets/font/ir ...

What's the best way to constrain a draggable element within the boundaries of its parent using right and bottom values?

I am currently working on creating a draggable map. I have successfully limited the draggable child for the left and top sides, but I am struggling to do the same for the right and bottom sides. How can I restrict the movement of a draggable child based o ...

Incorporating both an X button and hamburger menu is essential in my Bootstrap design, especially since I am working with React.js

Currently, I am working with the most recent version of Bootstrap and aiming to switch between the recognizable X icon and a hamburger menu. It seems like these two icons are overlapping each other, and I'm unsure if I can modify the default 3 lines o ...

The background image does not have the body padding applied

When creating a fixed top nav bar, I added padding to the body tag so that the nav bar always stays on top like this: body { padding-top: 70px; } Now, I want to set a background image for the body that covers the entire screen, so I added the foll ...

Utilize fancybox to target and display related content through external links within tabs

My website features a stylish box with tabbed inline content, allowing users to navigate between different views by clicking on tab names. However, I want the tabbed content to be accessible when a user clicks on a navigation link to launch the box. For ex ...

CSS selector targeting an element based on the value of its table border

Is there a way to target a table on a webpage using a CSS selector? The table structure looks like this: <table border="1" width="560" cellspacing="0"> <tr> <td height="28" colspan="3" bgcolor="#FFFFF...> </tr> </table ...

Adjust the svg rate using jQuery or JavaScript

Seeking help with a gauge I found on CodePen - struggling to adjust bubble values... <path id="Fill-13" fill="#F8B50F" d="M3.7 88.532h26.535v-#.795H3.7z"/> Can change the bars in JS, but not the bubbles using jq/js. Adjust the gauge with values be ...

Clicking on the label for Semantic UI Radio Buttons does not result in a check

Is anyone else experiencing difficulty with radio buttons not checking when the label is clicked? Oddly enough, this issue does not seem to be present on Semantic's website. For reference, here is Semantic UI Documentation where the radio buttons wor ...

The CSS rule that is determined to have the nearest bounding class will emerge victorious

Imagine this interesting situation in HTML: <div class="red"> <div class="blue"> ... <-- maybe more nested parents <div class="x">Test</div> </div> </div> If we consider the following ...

What is the reason for the absence of absolutely positioned elements in the render tree?

Recently, I came across some information about the render tree: As the DOM tree is being created, the browser simultaneously generates a separate tree known as the render tree. This tree consists of visual elements arranged in the order they will ap ...

Having difficulty targeting the span element in my CSS code

I've got an HTML document that includes multiple span elements. <span>Skip to content</span> There are several of these span elements throughout the document. I've attempted to hide them using the following CSS: span {display: non ...

CSS Word Break and Word Wrap functionality appears to be malfunctioning

Can someone please assist me with an issue I am facing? The word wrap or word break functionality is not working on my string. Here are the details: The company has seen a steady increase in revenue over the past five years, with a total growth of 49% bet ...

Applying FAB (Material UI) to span across 2 columns in a CSS Grid: A step-by-step guide

Is there a way to make the zero button larger than the other buttons in its row by spanning 2 columns? I would like it to be an oversized oval shape. Appreciate any assistance you can provide. import "./styles.css"; import Button from '@mui/materia ...

How can I restrict the number of characters per line in a textarea using javascript or jQuery?

Is there a method to control the number of characters per line in a textarea? For example, on lines 1-3 of the textarea, only 20 characters can be entered, while on subsequent lines, up to 50 characters are allowed. The current structure of the textarea l ...

Troubles with CSS in MUI Component Integration

How can I successfully implement a vertical timeline using Material UI in React? I've set it up, but the CSS isn't functioning as expected. Is there an error in my implementation? List of Dependencies: "@emotion/react": "^11.11.1& ...

The benefits of utilizing "native tags" instead of foreignObject in an SVG

As the creator of the stackoverflow-readme-profile project, I dedicated extensive time and effort to crafting a personalized Stackoverflow profile in the form of an SVG image. Utilizing "native svg tags," I meticulously constructed elements such as: < ...

Align the inline text at the center as if it were an inline-block element

Currently working on a design that appears deceptively simple, yet I'm encountering challenges in centering it while keeping the text aligned to the left. https://i.sstatic.net/qhf6p.png In an attempt to have the background span only the actual text ...

Despite utilizing overflow and wrap properties, HTML lists still fail to display horizontally

Make sure to copy the code and run the HTML file first. For organization, place the JavaScript file in the scripts folder and the CSS file in the styles folder. The issue at hand is that the li elements are not displaying horizontally as intended; they n ...

Reducing text size upon cell selection in Material UI Table

Seeking assistance in identifying the CSS property responsible for subtly shrinking text within cells when selected To see the issue, simply click on a cell in this code sandbox: https://codesandbox.io/s/material-ui-table-virtualized-t2xkt IMPORTANT: se ...