Border and shadow around image not working


I'm trying to set a border and box shadow around a "main image". By clicking a "small image" the main image is replaced.

You can see the behaviour here.

Unfortunately I'm not able to set the border and shadow around the main image.

 box-shadow:0px 0px 30px black;
   -webkit-box-shadow:0px 0px 30px black;
   -moz-box-shadow:0px 0px 30px black;
   border: 4px solid white;

Where is the problem and how do I solve it?

Thanks for your help.

Problem courtesy of: user1437032


The code you posted will work fine and does work fine in my browser. I then took at look at link and after search through your source I do not see your CSS being including in the page nor being applied to your image. So I added it.

After doing so I noticed the problem lies with that fact that the div in which the main image is including doesn't have the margin/padding for your 30px dropshadow to show.

Copy and past this in your CSS to see it working:

.imgOuter {
    overflow: hidden;
    width: 775px; //Adjusted Width
    height: 450px; //Adjusted Height
    padding: 20px;

.imgOuter img{
    box-shadow:0px 0px 15px #666;
    -webkit-box-shadow:0px 0px 15px #666; 
    -moz-box-shadow:0px 0px 15px #666;
    border: 10px solid #fff;
    margin-bottom: 45px; //Added to shift your other images away from new region

I see you have all your images on the page and have offset styles, using the above CSS will require some simple math to adjust your margins back to where you had them.

Working Image: **Screenshot**

Solution courtesy of: John Gerdsen


Try this -

.imgouter {
  border: 4px solid white;
  box-shadow:0px 0px 30px black;
Discussion courtesy of: Avinash T.

there are lot´s of syntax errors in your Snippet that cause those problems, for examle opening div tags outside of body and having no doctype opening script tags between head and body etc.

I´m sure you will be able to simply apply your css to the img and getting the result by fixing syntax first

Discussion courtesy of: john Smith

The problem is with your .imgouter div. It's like a little window where you show things. Your images are the same size as that window, that's why you can't see the boxshadow. (btw you didn't gave them a boxshadow in your jsbin). When you click on the small image you can see the boxshadow if you give this .imgInner img a boxshadow. You need to make the .imgouter size bigger to see the shadows.

do something like this:

Discussion courtesy of: Chanckjh

This recipe can be found in it's original form on Stack Over Flow.