Creating this Tinted Overlay effect in CSS?

Community Forums Forums Design Tips and Tricks Creating this Tinted Overlay effect in CSS?

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Davinder Singh Kainth 2 months, 4 weeks ago.

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

    hobbygirl66
    Participant
    Post count: 21

    I don’t now if this is possible.
    I see this style of a very large tinted photo in hero area of websites…
    particularly in flat design. I love it and want to know how its done and if can be done in CSS? Using a filter of some sort?
    If I can figure out how to do I want to use effect for hover-ing and is this something can do in CSS?

    here is example of look:
    The webite, http://mostlyserious.io/

    Is there a name for this effect?
    I have done zillion searches, tinted color overlay over photo, opaque tint on photo, milky color filter on image…. etc.
    Is this such a standard effect that only the newbiest of the noob would dare ask in a forum?
    If some one knows name for this effect or tutorial for Photoshop to get.. I would love it.

    http://mostlyserious.io/
    #86914

    Davinder Singh Kainth
    Participant
    Post count: 977

    There are few ways to achieve this:

    1. Most easy way is to give that tint effect to original photo and use processed photo directly on the website. This can be done in any image editing program. If you have an image and want to apply this effect – email me at iguiding AT gmail DOT com – will do it for you.

    2. Using CSS opacity function. Refer http://css-tricks.com/snippets/css/transparent-background-images/ and http://nicolasgallagher.com/css-background-image-hacks/


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

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

You must be logged in to reply to this topic.