Simple CSS Image Effects

index.html

<h2>Simple CSS Image Effects</h2>
<ol>
  <li>Original</li>
  <li>Black and White</li>
  <li>Sepia</li>
  <li>Warm Colors</li>
  <li>Cold Colors</li>
  <li>Green Tint</li>
  <li>Magenta Tint</li>
</ol>
<div class="image-slider">
<img class="image" src="https://i.imgur.com/ouDwClz.jpg" />

<img class="image black-and-white" src="https://i.imgur.com/ouDwClz.jpg" />
  
<img class="image sepia" src="https://i.imgur.com/ouDwClz.jpg" />
  
<img class="image warm" src="https://i.imgur.com/ouDwClz.jpg" />
  
<img class="image cold" src="https://i.imgur.com/ouDwClz.jpg" />
  
<img class="image tint-green" src="https://i.imgur.com/ouDwClz.jpg" />
  
<img class="image tint-magenta" src="https://i.imgur.com/ouDwClz.jpg" />
</div>


<h2>CSS Image Effects With Overlay</h2>
<h3>Original Image With Overlay</h3>
<div class="old-paper">
    <img class="original-image" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
    <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
  </div>
<h3>Black and White Image Effect</h3>
<div class="old-paper">
    <img class="original-image black-and-white" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
    <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
  </div>
<h3>Sepia Image Effect</h3>
  <div class="old-paper">
    <img class="original-image sepia" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
    <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
  </div>
<h3>Warm Colors Image Effect</h3>
<div class="old-paper">
    <img class="original-image warm" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
    <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
  </div>

<h3>Cold Colors Image Effect</h3>
<div class="old-paper">
    <img class="original-image cold" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
    <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
  </div>

<h3>Green Tint Image Effect</h3>
<div class="old-paper">
    <img class="original-image tint-green" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
    <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
  </div>

<h3>Magenta Tint Image Effect</h3>
<div class="old-paper">
    <img class="original-image tint-magenta" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
    <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
  </div>

<h2>Credits</h2>
<p>See the original article here: <a href="http://coding-dude.com/wp/css/css-image-effects/">CSS Image Effects</a></p>

<p><a href="https://www.photoshopsupply.com/patterns-textures/vintage-paper-textures">Old Texture</a> image provided by <a href="https://www.photoshopsupply.com/">PhotoshopSupply.com</a></p>
<p>Make these effects online using MockoFun <a href="https://www.mockofun.com/tutorials/vintage-photo-editor/">Vintage Photo Editor</a></p>

simple-css-image-effects.markdown

Simple CSS Image Effects

Code for creating simple CSS image effects that you can apply to any image in your web page.

Credits

See the original article here: CSS Image Effects

Old Texture image provided by PhotoshopSupply.com

Make these effects online using MockoFun Vintage Photo Editor

A Pen by Ion Emil Negoita on CodePen.

License.

style.css

.image-slider{
  display:flex;
  overflow-x:scroll;
  height:80vh;
}

/*Simple Image Effects*/
img.image{
  height:100%;
  display:inline-block;
  align-self:center;
  text-align:center;
}

.black-and-white{
  filter:brightness(70%) contrast(150%) saturate(0%) brightness(150%);
}

.sepia{
  filter:saturate(0%) sepia(100%) contrast(150%) saturate(150%);
}

.warm{
  filter: sepia(50%) contrast(150%) saturate(200%) brightness(100%) hue-rotate(-15deg);
}

.cold{
  filter: hue-rotate(180deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(180deg);
}

.tint-green{
  filter: hue-rotate(-30deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(30deg);
}

.tint-magenta{
  filter: hue-rotate(-270deg) sepia(55%) contrast(150%) saturate(300%) hue-rotate(270deg);
}

/*Old Paper Overlay*/
.old-paper{
  position:relative;
  max-width:850px;
}

.original-image{
  width:100%;
  height:100%;
  display:inline-block;
}
.overlay{
  mix-blend-mode:multiply;
  position:absolute;
  display:inline-block;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

.overlay img{
  width:100%;
  height:100%;
}