Add an inset box shadow to the image tag

I'm attempting to achieve an embossed effect on an image, similar to a polaroid. I want a box-shadow on the top and left edges insetted to the picture. However, I'm having trouble getting it to work. Could this be a browser issue?

I've created a demonstration on jsfiddle here: http://jsfiddle.net/PEgBv/25/ to illustrate what I'm trying to achieve.

I like how it looks on the second div box (where it is working). However, on the images, the shadow is only displayed without the inset attribute.

I'm using Chrome 14 on Linux.

htmlcsscross-browser

Answer №2

When dealing with images that have max-width: 100%; and height: auto; in fluid designs, the typical workaround may not be effective. These styles are commonly used to allow images to scale automatically until they reach their original width. To ensure that the surrounding <a> element (or any other element) expands to cover all the content, including the image, the addition of display: inline-block; is necessary. Without this addition, the shadow effect may not display as intended.

Therefore, along with the proposed workaround styles, it is important to include display: inline-block; in the class .img-shadow.

Answer №3

To achieve the desired effect, consider implementing the image as a background. Instead of inserting it as an img tag, apply 

background-image: url(source.jpg);
either in the css file or style attribute. This will allow the box-shadow to appear on top of the background image.

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

When bsg_head(); is inserted into the <head> tag, the content mysteriously vanishes

While working on a Wordpress project, I encountered an issue where adding the code <?php bsg_head(); ?> to the header resulted in all the content disappearing from the page. Surprisingly, the background color change from the stylesheet was still b ...

phphtmlwordpresswordpress-theming

sticky position is functional in Chrome, however it does not work in Firefox

I am looking to create a vertical div that stretches to the height of its parent container and contains smaller divs. If there is extra space, all divs except for the last one should be positioned at the top, with the last div placed at the bottom. I used ...

csstwitter-bootstrapflexboxbootstrap-4sticky

Arranging images next to each other using CSS and HTML

I've been trying to arrange four images side by side, with two on the top row and two on the bottom. I want to ensure they stay consistent across all browser sizes except for mobile. Here is what I have attempted so far: #imageone{ position: absol ...

javascripthtmlcss

I am looking to remove the video download button from the control list in the Android browser

Currently, I am developing a video project and looking to disable the download option on all Android browsers. I have attempted using a CSS trick to hide the media controls, but unfortunately, it only seems to work in Google Chrome. Any suggestions or al ...

phpandroidcross-browser

Create a unique web page layout by utilizing divs and spans

Can the design shown in this image be created? https://i.sstatic.net/hsIaQ.png I've tried the code below but it's not functioning properly. Any assistance would be appreciated! The issue is that the Q and A text should be in a box that automati ...

htmlcss

Error: Unable to access the 'style' property of null in prac.js at line 3

const heading = document.querySelector("h1"); heading.style.color = "blue"; Encountering an error when attempting to apply color to h1 element using DOM manipulation within a separate JavaScript file. The 2-line code snippet works flawlessly in the consol ...

javascripthtmldom

Disabling the .hover function temporarily

I am currently exploring how to temporarily disable the .hover function in jQuery based on a specific event that occurs on the page. You can view my current jsfiddle here: http://jsfiddle.net/4vhajam3/3/ (please note that I have omitted some code for simp ...

javascriptjqueryhtml

Placeholder text missing in Internet Explorer 11

There seems to be a problem with the placeholder text not showing up in Internet Explorer 11 when using AngularJS. It displays correctly on all other browsers and I have not made any changes to the CSS that could affect it. I even tried disabling all style ...

angularjshtmlplaceholder

Converting user's birthdate input from HTML to their age using PHP

I am facing an issue with retrieving the correct date from a date-time-picker named "dob" and passing it to PHP. When I try to post the date into the database user_age column, it only displays '2017'. However, if I manually set $dob to '10/0 ...

phphtml

Using AJAX in a loop iteration

I am struggling to grasp AJAX and its application for my specific needs. I am required to incorporate ajax calls within a foreach loop in my project. The challenge arises when contemplating the scenario where using PHP calls could result in all actions fir ...

phphtmlajaxwordpress

I am experiencing a situation where my content is overflowing but the scroll feature is

After making my website dynamic, I encountered an issue where the content overflow on the home page prevented me from scrolling to the bottom of the page. Here is a link to my website for reference: ...

htmlcssscrolloverflow

Enhancing functionality with jQuery: updating multiple input fields at

Currently, I am attempting to utilize jQuery to modify some HTML text by adjusting a slider. I have managed to accomplish this; however, I also need it to happen only if a checkbox is checked. How can I integrate both conditions and ensure that the text ch ...

javascriptjqueryhtmlcheckboxslider

Styling text by reducing its size with CSS

Utilizing a CSS class to truncate text in the accordion header, which includes both a URL and plain text fields that need to be displayed on the same line. Desired Output: .../abc/xyz Count:42 Current output: .../abc/xyz Count:42/ (An odd slash is ...

htmlcssangularjsaccordion

Execute AJAX request for two individual buttons

I have a scenario where I want to use two buttons to open separate PHP pages, but I would like to trigger both buttons with a single function. The AJAX function should then determine which button was clicked and open the corresponding PHP page - for exam ...

javascriptphphtmljqueryajax

What is the best way to stretch my background image to cover the entire screen?

I am working on a Python Django project and I want to create a full-screen background. The HTML code: { % load static %} <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags--> <meta charset=" ...

htmlcssdjango

Exploring the Contrasts Between HTML String and Emphasizing the Variances

Challenge Description: The task is to compare two HTML input strings with various styling elements like strong, li, ol, line-through, etc. The goal is to display the original text and the edited text in two separate boxes on the screen. Any words missing i ...

javascriptjqueryhtmlcssgoogle-diff-match-patch

How can you modify the Bootstrap width to activate the responsive design?

I currently have the following HTML code snippet: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale= ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Comparing currency to double in handlebars: a comprehensive guide

I've been working with Handlebars.js and encountered an issue when trying to compare product prices above $35. The problem arises from the fact that prices are stored as "$54.99" which gets treated as 0 when compared to a number. How can I effectively ...

htmlcsshandlebars.jsbigcommerce

Tips for creating a function to assign a CSS width using a JavaScript variable?

Here is the code snippet I have been working on: ...<script> function adjustElementSize() { var newSize = window.innerWidth - 600; document.getElementById("spin").style.width = newSize + "px"; document.getElementById("spin").style.height = newSize + ...

javascriptcsshtml

hyperlink to choose a specific option from a drop-down menu

The challenge I am currently working on involves page1.html <a href="/foo"></a> foo.html <select ng-model="ctrl.listvalues"> <option id="{{item.value}}" ng-repeat="item" in ctrl.availableValues" value="{{item.value}}">item.di ...

javascriptjqueryhtmlangularjs