Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    May 2015
    Posts
    1
    Member #
    49580

    Inset Box Shadow Positioning

    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. Any thoughts?

    Thanks so much.

    Here is my code:

    HTML:

    HTML Code:
    <div class = "Content">
        <div class = "About">
    
          <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>
      </div>
    The whole site is also wrapped in a "shadow-wrapper" div" if that helps at all.

    CSS:
    Code:
    .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.  

  3. #2
    Junior Member
    Join Date
    May 2015
    Posts
    27
    Member #
    49999
    here the inset box-shadow element:-

    try it
    box-shadow: inset 0 2px 0px #dcffa6;


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com