Question

I am trying to create a hover effect (with html and CSS below). The hover effect is working, but I can’t get it on top of .portfolio_thumb.

I am really not that proficient with CSS so be gentle 🙂 i have a test site running here: http://kazam.dk/36-2/#!prettyPhoto

where you can see it loads beneath the picture!

css

.portfolio_thumb{
    position: relative;
    z-index: 0;

}

.portfolio_thumb a span{
    display: none;
    position: relative;
    float:left;
    width:163px;
    z-index: 2;
}

.portfolio_thumb a:hover span{
    display: block;
    position: absolute;
    z-index: 9;
    width:163px;
    height: 229px;
}

HTML

<div class="portfolio_thumb">

<!-- .portfolio_short_content -->
    <div class="portfolie_short_content_containe">


        <a class="lightbox" rel="lightbox" href="<?php echo $image[0]; ?>" title="<?php echo $image_desc; ?>">


            <p class="textarea"><?php echo $full_descr; ?></p>
            <img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" alt="<?php echo $image_alt; ?>"></img>                                     
                <span>
                    <p><span class="lable"><?php echo $short_descr;?></span> </p>
                    <p><span class="lable"><?php echo $link; ?></span> </p>                                                      
                </span>                                                                     
        </a>                                                                            

    </div>
</div>

Answer 1

1. Move the <span> tag above the <img> tag and add a class to it (I used the class “hover” for below example).

2. Add that class to the CSS selectors. The rest of the CSS does not necessarily need to be changed, but you can position the hover <span> if you’d like.

3. Working example: http://jsfiddle.net/x6Z2L/