Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #16912

    hi. i really like this theme, but i want to modify the style of the frontpage portfolio thumbnail grid a bit:

    there should be a red overlay div with 0.5 opacity on / over the thumbnail images that fades out on mouseover. (instead of the greyscale effect.)

    – like it was done here (just the other way round): http://sarwiya.com/work/?

    e. g. i tried to edit loop-portfolio.php like this:

    Code:
    <div class=’inner-entry’>
    <div class=’thumbgrid’>
    <?php
    echo “<h1 class=’post-title portfolio-title’>”;

    echo “</h1>”;
    $forceSmall = true;
    $slider = new avia_slideshow(get_the_ID());
    $slider -> setImageSize($image_size);
    if(!empty($avia_config['portfolio_ajax'])) $slider -> set_links(get_permalink());
    echo $slider->display($forceSmall);
    ?>
    </div>
    </div>

    and in custom.css i played around with some lines like this to try if it works:

    Code:
    .thumbgrid {
    display: block;
    */ position: relative; top: 0; left: 0; /*
    width: 100%;
    height: 100%;
    background: red !important;
    opacity: 1; */ opacity: 0.5 /*
    z-index: 101;
    }

    but nothing happens… and if i change the width / height 100% to 100px the red square is above and not over / on the thumbnails.

    any ideas how i can solve this? maybe i edited the wrong include-files…

    thanks in advance!

    #93360

    Hi,

    The overlay is controlled by jquery so modifying php will not help.

    You can try modifying this however

    #top .inner-entry .slideshow_container :hover {
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 5;
    }

    This is how the url you provided has their overlay structured.

    Thanks,

    Nick

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘how to put overlay div over portfolio thumbnail images ?’ is closed to new replies.