Box-shadow is not showing or z-index


Tags: html,css,z-index,css3

Problem :

i have tried as much i know about this stuff but failed to show box-shadow over the image.

http://thesameffect.com/healthy-habits-and-distinctions/#related-posts

i want to show shadow overlayed on the images. same like as ..

http://thesameffect.com/blog/

Please kindly help me..

HTML :

<div class="related-posts">
    <h3 class="related-title">Related Posts</h3>
    <ul id="related-posts" class="related-list">
        <li>
            <a title="Permanent Link toHow Genetics and Epigentics Relate to Your Health and Fitness" rel="bookmark" href="http://TheSamEffect.com/how-genetics-and-epigentics-relate-to-your-health-and-fitness/">
                <img class="attachment-Header Square" width="297" height="200" title="genes2" alt="genes2" src="http://TheSamEffect.com/wp-content/uploads/genes2-297x200.jpg">
                <span class="related-heading">How Genetics and Epigentics Relate to Your Health and Fitness</span>
            </a>
        </li>

        <li>
            ...
        </li>   

        <li>
            ...
        </li>
    </ul>
</div>

CSS :

.related-posts ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.related-list li {
    background-color: #F4F4F4;
    box-shadow: 0 0 10px #000000 inset;
    float: left;
    height: 150px;
    list-style: none outside none !important;
    margin: 0.25em !important;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 216px;
}

.related-posts ul li a {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-decoration: none;
}

.related-posts a {
    color: #F4F4F4;
}

.related-list img {
    display: block;
    margin: 0;
    position: absolute;
}

.related-heading {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    font-family: Conv_resea-bolditalic,"Helvetica Neue",Arial,Helvetica,sans-serif,georgia;
    font-size: 16px;
    left: 0;
    min-height: 40px;
    padding: 10px;
    position: absolute;
    width: 90.5%;
    z-index: 1;
}

PHP - WP Codes :

Thats how i am extracting images from genesis.

            $img = genesis_get_image() ? genesis_get_image( array( 'size' => 'Header Square' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';

            $related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . $img . '<span class="related-heading">' . get_the_title() . '</span></a></li>';

after doing all this stuff i am still unable to see box-shadow, Actually shadow is there at its actual place but due to z-index i think i am unable to visible shadow.

please kindly help me to resolve the issue.

thank you.

After Solution:

The following code just show the image url in Genesis.

genesis_get_image( array( 'format' => 'url' ) );



Solution :

Try something like this

http://jsfiddle.net/esnLn/

Set the image as div background


    CSS Howto..

    How to HTML/CSS Limit / Clip / Mask an object?

    How to use sprite image in css?

    How to get the CSS-Code and save in a String?

    How to change css content hover effect background color css php in this situation?

    How to apply CSS to namespace prefixed elements in IE8?

    How to remove background from breadCrumb

    How to add custom css responsive in Avada WP Theme?

    How to replace flex in this layout?

    How to mix two image using clipping in css?

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    Showing refresh button when animation is complete?

    How to fade loop background images?

    CSS class is missed after jQuery replaceWith. How to fix?

    how to switch between left and right css rules using Jquery?

    How to use CSS in XML and XSL

    How select/option open in top?

    how to make an oval in css?

    How to show the vertical image into horizontal manner using HTML and CSS?

    How to give hover effect to next div using css

    Is XSS possible via an @import, and if so how? Are there ways to protect against it?

    PHP Header Include (nav bar) not showing up [closed]

    How do I make a Javascript alert display only once, ever? [closed]

    How to give menu sub menu options

    How to deploy just HTML, CSS webpage to jetty?

    How to create a
      with a triangle for the :active row?

    how to change the CSS linear-gradien backgroundt height (thickness)?

    How to make diagonal titles on html tables

    How to create a dynamically sized form background with CSS?

    How to Auto-Resize a DIV with CSS while keeping Aspect Ratio?

    How to make hover use border-radius first-child