Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 5, 2015 at 7:01 pm #547463
    Till

    Hi Enfold team,

    I’d like to adapt the hover-behavior of the portfolio grid of my Enfold website. On hover over an image OR a title of the grid this should happen:
    _ don’t display entypo arrow-icon
    _ change title color to #00afc6
    _ change image to greyscale
    _ overlay image (spare white tringle) witch color #00afc6, opacity:0.75

    Can you tell me what to change in order to achieve this result?

    Best regards,
    Till.

    December 6, 2015 at 9:07 pm #547700
    Basilis

    Hey Till!

    Use the following to your CSS

    a:hover .image-overlay .image-overlay-inside {
    display: none;
    }
    #top #wrap_all .main_color h3 {
    color: #00afc6
    }

    Now, by remove the arrow, you remove the overlay also.
    What do you mean by ” overlay image “?

    Thanks a lot

    Cheers!
    Basilis

    December 7, 2015 at 11:23 am #547886
    Till

    Hey Basilis,

    thanks for your quick response and sorry for not beeing precise enough … I already made some changes and now there are only two things remaining I would like to adapt:

    _ on hover (when the image is overlayed with the colored rectangle) keep the white tringle pointing from the title to the image visible (compare my website with the mockup image). How can the white triangle always stay above of the overlay?

    _ on hover over a portfolio title apply the overlay effect to the corresponding image AND on hover over the image change the color of the corresponding title to #00afc6 – so that it doesn’t make a difference whether you rollover the image or the title. Is that possible?

    Cheers,
    Till.

    December 8, 2015 at 6:32 pm #548928
    Andy

    Hi!

    Not sure what you mean. About which white triangle are you talking about? can you highlight your intentions using screenshots please? you can use imgur.com or dropbox.

    Cheers!
    Andy

    December 8, 2015 at 7:35 pm #548973
    Till

    Hi Andy!

    Sure, I uploaded two jpgs, showing the small white arrow/triangle I mean and the hover effect I would like to achieve.

    On my website I already modified the portfolio grid rollover effect to a color overlay with the image visible in grayscale in the background. This looks/works fine so far. However, now the small white arrow is no longer visible on hover – probably because it is stacked behind the colored overlay. Is it possible to bring it to the top layer to keep it visible also on rollover?

    My second question is, if it is possbile, to link the rollover state of the image and the corresponding title (in my example: the picture of the balloons and the line “Econa”), so that both – the picture and the title – change color when rolling over one of the two elements (i.d. making them function as one single element)?
     
    Cheers,
    Till.

    December 14, 2015 at 4:24 pm #552445
    Andy

    Hi!

    try this code in Quick CSS field:

    .avia_transform a:hover .image-overlay {
z-index: 0;
}

    Regards,
    Andy

    December 14, 2015 at 4:50 pm #552473
    Till

    Thanks, that makes the white arrow stay visible also on hover!

    And regarding my second question: is there a feasible way to “connect” the portfolio image and the corresponding title, so that both change to hover state simultaneously, when rolling with the mouse over one of them?

    Cheers,
    Till.

    December 14, 2015 at 5:37 pm #552503
    Andy

    Hey!

    unfortunately that won’t be easily possible and you would need to hire a freelance developer for this job.

    Regards,
    Andy

    December 14, 2015 at 5:51 pm #552508
    Till

    Ok, thanks for the feedback!

    Regards,
    Till.

    December 15, 2015 at 9:58 am #552874
    Rikard

    Hi,

    Good luck with your edits :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Portfolio grid hover behavior’ is closed to new replies.