Code for creating simple CSS image effects that you can apply to any image in your web page.
See the original article here: CSS Image Effects
Old Texture image provided by PhotoshopSupply.com
A Pen by Ion Emil Negoita on CodePen.
<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> |
Code for creating simple CSS image effects that you can apply to any image in your web page.
See the original article here: CSS Image Effects
Old Texture image provided by PhotoshopSupply.com
A Pen by Ion Emil Negoita on CodePen.
.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%; | |
} | |