Problem with Inset Box Shadow Positioning on Image [HTML & CSS]

programming web dev
1

Hello there!

I’m trying to add an inset box shadow to two images using their li elements, and to remove this shadow on the images on :hover. However, Im having a great deal of trouble positioning the shadow directly on top of the image. Not only does it sit slightly off the bottom of it, on one image the box shadow nearly extends to the top of the website. I assume this a problem with a container div I am using, but I have been unable to rectify it.

I tried webdesignforum but no one seemed to be able to help me. Any thoughts?

Thanks so much.

Here is my code:

HTML:

  <h2>Welcome to Walsh's Window Cleaning</h2>

  <p>Lorem ipsum d....</p>

  <p>Ut lorem odi....</p>
</div>


<div class = "Services">

  <ul>
      <li class = "com-shadow"><img class = "com" src = "images/images/commercial.jpg" alt = "Commercial" height = "260" width = "560"></li>
      <li class = "res-shadow"><img class = "res" src = "images/images/residential.jpg" alt = "Residential" height = "260" width = "560"></li>
  </ul>

</div>

The whole site is also wrapped in a “shadow-wrapper” div" if that helps at all.

CSS:

.Content {
  visibility: visible;
  top: 13.25em;
  position: relative;
  z-index: 1;
  float: bottom;
}

@media screen and (min-width: 40.5em) {
  .Content {
    top: -6.75em;
  }
}

.Services ul {
  display: inline;
  list-style-type: none;
}

.Services .res {
  position: relative;
  z-index: -1;
  top: -1.25em;

}

.Services .com {
  position: relative;
  z-index: -1;
}

.Services img {
  max-width: 100%;
  height: auto;
}

.com-shadow {
    -webkit-box-shadow: inset 1px 0px 160px 50px rgba(0,0,0,0.35);
    -moz-box-shadow: inset 1px 0px 160px 50px rgba(0,0,0,0.35);
    box-shadow: inset 1px 0px 160px 50px rgba(0,0,0,0.35);
  }

.com-shadow:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}


.res-shadow {
    -webkit-box-shadow: inset 1px 0px 160px 50px rgba(0,0,0,0.35);
    -moz-box-shadow: inset 1px 0px 160px 50px rgba(0,0,0,0.35);
    box-shadow: inset 1px 0px 160px 50px rgba(0,0,0,0.35);
  }

.res-shadow:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.Services {
  float: bottom;
  top: -1.2em;
  position: relative;
  width: 100%;
}

@media screen and (min-width: 40.5em) {
  .Services {
    width: 66.6666%;
  }
  .Services li {
    width: 50%;
    height: auto;
  }
  .Services ul {
    width: 50%;
    height: auto;
  }
}


.About {
  float: bottom;
  position: relative;
  background-color: #70AFD0;
}

.About h2 {
  padding-top: 1em;
  padding-left: 1.5em;
  margin-bottom: 2.25em;
  color: #FFFFFF;

}

.About p {
  padding-left: 1.75em;
  padding-right: 1.75em;
  margin-bottom: 1.75em;
}

.About {
  width: 100%;
}

@media screen and (min-width: 40.5em) {
  .About {
    width: 33.3333%;
    float: right;
  }
}

I’ve probably included some unnecessary bits there. My apologies for that.

2

Do you have a link online where we can see this problem more easily? It’s much easier for me to fire the Chrome Dev Tools and edit live as opposed to trying to re-create it locally :smile:

For example, this is what I see when I attempt to re-create it using my own images and the snippets of HTML and CSS you have posted.

3

Kirupa,

Thank you so much. You can find the site here. I had believed the box extending so far was due to the content div, but even after removing this it still remains the same, just moves down a little bit lower. The content div also is blocking the ability to click on the navigation menu.

The site is very much a work in progress. Recently, small problems like this have been adding up. This is the first site I am entirely creating myself, so if you notice any other mistakes or have any quick fixes or tips after looking over the website and my code, it would be very very much appreciated.

Thank you!

-jd42

4

At first glance, I do have some suggestions on how to improve the structure of your site, but I’m a bit busy with something else to offer you more constructive feedback. For the drop-shadow issue, here is a slightly simplified version of your HTML structure:

<!DOCTYPE html>
<html>

<head>
  <title>CSS Sprite Animation</title>
  <style>
    .Content {
      visibility: visible;
      top: 13.25em;
      position: relative;
      z-index: 1;
      float: bottom;
    }

    @media screen and (min-width: 40.5em) {
      .Content {
        top: -6.75em;
      }
    }

    .Services ul {
      display: inline;
      list-style-type: none;
    }

    .Services .res {
      position: relative;
      z-index: -1;
      top: -1.25em;
    }

    .Services .com {
      position: relative;
      z-index: -1;
    }

    .Services img {
      max-width: 100%;
      height: auto;
    }

    .shadow {
      -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75);
      box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75);
    }

    .image {
      display: block;
      width: 250px;
      height: 150px;
      background-color: yellow;
      margin: 10px;
    }

    .image:hover {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }

    #comDiv {
      background-color: #EEE;
    }

    .com-shadow {
      -webkit-box-shadow: inset 1px 0px 160px 50px rgba(0, 0, 0, 0.35);
      -moz-box-shadow: inset 1px 0px 160px 50px rgba(0, 0, 0, 0.35);
      box-shadow: inset 1px 0px 160px 50px rgba(0, 0, 0, 0.35);
    }

    .com-shadow:hover {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }

    .res-shadow {
      -webkit-box-shadow: inset 1px 0px 160px 50px rgba(0, 0, 0, 0.35);
      -moz-box-shadow: inset 1px 0px 160px 50px rgba(0, 0, 0, 0.35);
      box-shadow: inset 1px 0px 160px 50px rgba(0, 0, 0, 0.35);
    }

    .res-shadow:hover {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }

    .Services {
      float: bottom;
      top: -1.2em;
      position: relative;
      width: 100%;
    }

    @media screen and (min-width: 40.5em) {
      .Services {
        width: 66.6666%;
      }
      .Services li {
        width: 50%;
        height: auto;
      }
      .Services ul {
        width: 50%;
        height: auto;
      }
    }

    .About {
      float: bottom;
      position: relative;
      background-color: #70AFD0;
    }

    .About h2 {
      padding-top: 1em;
      padding-left: 1.5em;
      margin-bottom: 2.25em;
      color: #FFFFFF;
    }

    .About p {
      padding-left: 1.75em;
      padding-right: 1.75em;
      margin-bottom: 1.75em;
    }

    .About {
      width: 100%;
    }

    @media screen and (min-width: 40.5em) {
      .About {
        width: 33.3333%;
        float: right;
      }
    }
  </style>
</head>

<body>
  <div class="Services">

    <ul>
      <li>
        <div class="shadow image" id="comDiv"></div>
      </li>
      <li>
        <div class="shadow image" id="resDiv"></div>
      </li>
    </ul>

  </div>
</body>

</html>

The main thing to note is the HTML for the list elements and the CSS for the drop-shadow:

    .shadow {
  -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.75);
}

.image {
  display: block;
  width: 250px;
  height: 150px;
  background-color: yellow;
  margin: 10px;
}

.image:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

The main change is that I am applying the drop shadow to the image itself as opposed to the list. The hover follows that as well. That change will allow your drop-shadow to behave as you would expect.

I’ll try my best to revisit this tomorrow and give you more feedback on the overall structure of your site. In the interim, take a look at how the HTML and CSS for this site is handled (http://www.kirupa.com). The general layout of several header rows and multiple columns below is very similar to what you are trying to accomplish. Feel free to steal ideas from my implementation :smile:

Cheers,
Kirupa

5

Thanks so much!

I tried to implement your changes, but now both the images are on top of eachother and the shadows are either absent or not responding to the mouse when it hovers over. XD I’ve been trying to fix it but I don’t seem to be getting anywhere. I could position one of the images to the right, but that would seem to be more of a band-aid than a fix, and I’m not sure why the shadow isn’t working…

Website with current “progress”.

(I know your image size was just for demonstration, but I happen to like that size. :smile: )

Thank you, I’ll have a look at your site now!