Webb Food Services

Webb blue overlay effect

Posted by Taylor Bernard on July 14, 2015

heres 2 examples i did to choose from.
1 is box shadow method. less clutter and IE9+

2 is using :after method with trans bg and z-index.

http://codepen.io/anon/pen/EjRojL

Comments

Justin Bernard on July 14, 2015:

the prob is we need it to overlay an image that is inline in the div, not a bg image

see how i have it in ex1 here

http://codepen.io/anon/pen/aOKqZo

Taylor Bernard on July 14, 2015:

http://codepen.io/anon/pen/MwXQeL

Justin Bernard on July 14, 2015:

actually, will this work?
http://codepen.io/anon/pen/rVKJLg

Taylor Bernard on July 14, 2015:

just posted same thing. looks like it

Justin Bernard on July 14, 2015:

haha same thing. appears done?

Taylor Bernard on July 14, 2015:

reckon so. its css2 methodology

http://www.w3schools.com/cssref/sel_after.asp

Taylor Bernard on July 14, 2015:

looks like even has ie8 compat with doctype ref.

also looks like css3 is double colon syntax. the example i posted was single colon and works fine.

Note: IE8 and Opera 4-6 only support the old, single-colon CSS2 syntax (:after). Newer versions support the standard, double-colon CSS3 syntax (::after).

Note: For :after to work in IE8, a <!DOCTYPE> must be declared.

Justin Bernard on July 14, 2015:

do we even need to do after? can we just add another class called like .blue_tint and assign it?

here's the page the designer found when he came up with the idea in the first place
https://css-tricks.com/tinted-images-multiple-backgrounds/

Taylor Bernard on July 14, 2015:

try this. i dont know if this is the right way to do it. but looks like it tricks it.

http://codepen.io/anon/pen/MwXQeL

Taylor Bernard on July 14, 2015:

looks like i got confused and was on an old version of the codepen example.

that one i sent last was basically what i sent before. but it looks like i did lay it out with the overlay effect being its own class. so should be fine right?

Justin Bernard on July 14, 2015:

that looks pretty dang good. consider that done.

Justin Bernard on July 14, 2015:

i'll just post this here as 'final' version
http://codepen.io/anon/pen/mJKxeK