Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Box Shadows

Sergey Kulakov
Sergey Kulakov
10,237 Points
Posted by Sergey Kulakov
Sergey Kulakov
10,237 Points

How to apply the box-shadow property to an <img> element?

I mean, if my images aren't nested in div's. Does the box-shadow property work in that case? I supposed it should work, but it doesn't.

4 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

I have just had a go in workspaces and it has added the box shadow as i would have expected directly to the img but using both a class name and the element selector..

Code:

<img class="box-shadow" src="img/thumb.jpg">

img {
    box-shadow: 5px 5px 5px #222;
}

.box-shadow {
    box-shadow: 5px 5px 5px #222;
}

hope this helps !

Craig

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

The box-shadow property does work on the img tag. Here is a simple codepen showing it working. If, after seeing this, you are still having issues, can you post your code?

Sergey Kulakov
Sergey Kulakov
10,237 Points
Sergey Kulakov
Sergey Kulakov
10,237 Points

Thank you for replies!

Sorry for inaccuracy. I meant to apply the box-shadow property with the 'inset' parameter. The box-shadow property works with the images without 'inset' very well.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Ahh now there is a tricky one...

I have not tried this before but there is some box shadow properties that prevent being able to see the inset because of its position on the page.

My advice would be to try using a container div for the image, give that div a background-image through css and an inset box shadow....

But again i have not tried this so am unsure to how it will turn out but its and idea ...

Craig