Image Effects of 2016 for Website Banner

Question

I've been searching about the name of this image effect but can't find an answer since I don't really know what to put on the search engine. So I decided to visit here to post a question to you guys hoping that I get an answer. Here is the image effect

Answer 1

That effect is called a gradient, someone overlaid a semi-transparent gradient on top of an image.

You can do that with HTML/CSS. Gradients in CSS

You'll need to check this out to get the gradients to be transparent though

The HTML would look something like this:

<div id="container>
  <img src="path/to/img.jpg">
  <div id="gradient"/>
</div>

And an example of what your CSS might look like could be:

#container {
  position: relative;
}

#container img {
  width: 100%;
}

#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* note: this CSS has gradients but to make them transparent check out the link I sent above */
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, yellow); /* Standard syntax */
}

You can also do it simply in photoshop, by using your image as a background layer, and putting another layer on top, then making a gradient on top of the image and setting the opacity to be 70% or so. Hope this helps!