Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #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):

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

    <div class=’inner-entry’>
    <div class=’thumbgrid’>
    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);

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

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



    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.



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.