0

I'm not sure why this isn't working. I've never had problems with drop shadows before. I have an image set to position: relative, because there's an item below it (using z-index), and another above it (also using z-index. I might add that the image has a z-index as well, right between the 2).

Here's the basic layout:

<div class="item active" data-slide-number="1" id="118">
    <a href="http://themedev.thepixelpixie.com/pixieportfolio/delrey-medical/" title="Project Name" data-toggle="tooltip">
        <img src="/image-800x500.jpg" title="Project Name">
    </a>

    <div class="project-detail-border"></div>
    <div class="project-detail">
        <div class="top-detail">
            <h4>Project Name</h4>
            <div class="short-description">
                Lorem Ipsum...  
            </div>
        </div>

        <div class="table-row">
            <div class="project-links one">
                <p>Website Design, WordPress</p>
            </div>

            <div class="project-links icons">
                <p>
                    <i class="fa fa-wordpress fa-2x" data-toggle="tooltip" title="Wordpress"></i>
                    <i class="fa fa-html5 fa-2x" data-toggle="tooltip" title="HTML-5"></i>
                    <i class="fa fa-css3 fa-2x" data-toggle="tooltip" title="CSS-3"></i>
                    <i class="fa fa-paint-brush fa-2x" data-toggle="tooltip" title="Adobe"></i>
                    <i class="fa fa-code fa-2x" data-toggle="tooltip" title="Code"></i>
                </p>
            </div>
        </div>

        <a href="http://link" title="Project Name" data-toggle="tooltip">
            <div class="project-more">View Project</div>
        </a>
    </div>

</div>

Here are the main styles associated with it:

#portfolioCarousel h4 {
    font-size: 19px;
    line-height: 28px;
    color: #3d3d3d;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

#portfolioCarousel .short-description {
    font-size: 14px;
    line-height: 24px;
    color: #8c8b8b;
    margin-bottom: 0;
}

#portfolioCarousel .icons i {
    text-align: center;
    color: #8c8b8b;
    padding: 0 1rem;
}

#portfolioCarousel {
    height: 550px;
    overflow: visible;
}

#portfolioCarousel .item {
    float: none;
}

#portfolioCarousel img {
    border-radius: .5rem;
    z-index: 4;
    position: relative;

    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #000;
}

#portfolioCarousel .project-detail {
    background: #fff;
    position: absolute;
    top: 15%;
    left: 65%;
    z-index: 5;
    width: 35%;
    margin-top: 4px;
    border-right-color: #f3f3f3;
    border-right-width: 4px;
    border-right-style: solid;
}

#portfolioCarousel .project-detail-border {
    border-color: #f3f3f3;
    background-color: #fff;
    border-width: 4px;
    border-style: solid;
    position: absolute;
    left: 65%;
    top: 15%;
    z-index: 2;
    width: 35%;
    min-height: 119px;
}

#portfolioCarousel .project-detail .top-detail {
    padding: 25px 20px;
}

#portfolioCarousel .project-detail .table-row {
    display: table;
    width: 100%;
}

#portfolioCarousel .project-detail .project-links {
    width: 50%;
    display: table-cell;
    border-top: 1px solid #dfdfdd;
    text-align: center;
    min-height: 9rem;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#portfolioCarousel .project-detail .project-links p {
    position: relative;
    top: 50%;
    font-size: 1.3rem;
    line-height: 1.75rem;
    color: #989899;
    text-transform: uppercase;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    padding: 1.5rem 2rem;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

#portfolioCarousel .project-detail .project-links p .fa-2x {
    font-size: 1.5em;
}

#portfolioCarousel .project-detail .project-links.one {
    border-right: 1px solid #dfdfdd;
}

#portfolioCarousel .project-detail a .project-more {
    height: 90px;
    width: 100%;
    display: block;
    background-color: #dfdfdd;
}
Laura Sage
  • 33
  • 7
  • It is difficult to tell what your problem is. The `box-shadow` property appears to be working just fine, but your `z-index` values cause `.project-detail` to be "on top of" the image. Perhaps you can take [this jsFiddle](https://jsfiddle.net/yhL6os9d/) and adjust it to better illustrate the issue. – jeffjenx May 05 '16 at 18:14
  • The problem is purely that the box shadow doesn't appear at all. The div behind the image and behind the project-detail box is supposed to be simulating an outline that only appears on the portions of that box that appear off of the image (thus the different z-index settings). That part of things is working quite well. But I wonder if somehow those settings are what's throwing off the box shadow? I'd be willing to give a URL, but it's a dev site and I kinda don't want that living in the ether for all time! LOL Is there someplace I could send it to? I'd be happy to have you take a look. – Laura Sage May 05 '16 at 18:58
  • I'm guessing you probably have some other CSS code that is either removing or preventing your box shadow from working. Try inspecting the element in your browser's Dev Tools (press F12) and it shows you what styles are being applied and what file is doing the styling. Check that and you should be able to see what is going on. – jeffjenx May 05 '16 at 20:13

0 Answers0