Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #164889

    Hi guys,

    I guess this question may be beyond your support – but well – I give it a try …
    My problem is that the greyscale effect makes my portfolio thumbnails look very flat & washed out (contrast is missing).
    Which is not ideal for a graphic design showcase.
    But – the setting “no effect” – it is unfortunately not very “click-friendly” – as it shows no visual link indication (apart from the changing mouse image) anymore.

    My favourite solution would be to create nice contrasty b/w thumbnails and add a hover effect in form of a transparent colour overlay.
    But to explain to me how this works is most likely a bit over the top.
    So in case I find somebody who can re-write the Java-script function for me, which parts must be edited (cancel grey effect, insert colour effect)?

    Many thanks in advance!


    Hi typogretel!

    I believe that can be done with CSS, do you have an example?

    Also, a link to your website would be helpful.



    Hi Josue,
    thanks for the swift reply.
    I was thinking about something like this:

    The effect can been seen here:

    Regarding my site – it is still in maintenance mode, but I can send you a log-in to your email address.



    Hi Carmen!

    That one would require adding the secondary container and class to the image. The easiest route would be to use fitlers or effect directly on the image.

    So you can try finding one that uses a webkit filter or something like that and adding the effect to this class selector:

    #top .slideshow li img {

    and for whatever hover effect:

    #top .slideshow li img:hover {

    Best regards,

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

The topic ‘Angular // Change Greyscale Hover effect’ is closed to new replies.