Creating this Tinted Overlay effect in CSS?

[hobbygirl66]

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/

[Davinder Singh Kainth]

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/

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Author]

Posts