Color overlay

[Design Newbie]

I am super new to all this and probably don't even know how to phrase my question with the 'proper lingo' but I am going to try anyways......

 

   How can I put a colored overlay on an image (just a light tint)?

 

(I don't have a codepen example since I don't know how to do it in the first place)

[mvaneijgen]

1 hour ago, Design Newbie said:

I don't have a codepen example since I don't know how to do it in the first place

That is the great thing about Codepen, you don't need to you can just start and you'll get a live preview of what you're doing!

 

I don't see how this could be a GSAP related question. But you could start by creating two elements, your image and the coloured shape and then search the web on how to overlap two elements in CSS. Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

As @mvaneijgen says this is super simple:

See the Pen GRXdWda by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps,

Happy Tweening!

[Design Newbie]

I apologize for such dumb questions (as this is not my first) .... and I apologize if some of what I inquire about is not directly related to GSAP directly either. I am just totally lost with all this html, css, javascript stuff that it all seems to just kind mix together for me I guess. 

   And you are right.....this question has nothing to do with animation with GSAP..... I got the wrong forum apparently. Thank you for your time anyways and for still providing solutions!!!

[Rodrigo]

Hi @Design Newbie,

 

No need to apologize at all. GSAP forums are a safe and friendly place where we're all teachers and learners, no dumb questions, downvotes or anything of the sort around here.

 

If you're just starting with web development, maybe dive right into GSAP might be a few steps away. I strongly recommend you to get some HTML/CSS/Javascript knowledge first and then getting your mind wrapped around how GSAP works will be super simple. Here you can find great learning resources for free:

https://www.youtube.com/@freecodecamp/featured

 

Happy Tweening!

[Cassie]

Quote

 I am just totally lost with all this html, css, javascript stuff that it all seems to just kind mix together for me I guess. 

We were all there at one point, no worries! I quite like the 'building a house' analogy.

 

HTML is like the raw building materials - so the bare bones, text elements like h1, h2, h3 etc, img elements, links and buttons
CSS is decoration, styling - it's like painting the house and making it look nice. Think layout and colours and aesthetics.
JS is like plumbing and electricity - functionality, interaction, data

There's always a little overlap but that's a nice baseline to start from.

[The Old Designer]

You can also look into CSS filters https://www.w3schools.com/cssref/css3_pr_filter.php 

Trust me we all start somewhere and when I see some of the code solutions here seemingly just added off the top of the head I despair I will ever get that good.. still keep trying, I do!