投影不出现在图像上

Question

我不确定为什么这不起作用。我之前从未遇到过阴影问题。我有一个图像设置位置：相对，因为它下面有一个项目（使用z-index），另一个上面的项目（也使用z-index。我可能会添加该图像也有一个z-index，正好位于2）。

这是基本布局：

<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>

以下是与之相关的主要风格：

#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;
}