Photo editing effects will turn graphical elements to be expressive. With suitable effects, you can use a simple image and convey an idea. For example, you can bring logo to the foreground by blurring the background image.
The effects like image blur, transparency, shadowing creates attractive visual effects. There are many different image effects available. In fact, hundreds of them are available.
Online photo editing tools use a variety of methods to apply the effects on a target image. For example, either a CSS filter property or a SVG filter primitive can create an image blur effect.
Most of the visual effects are achievable with HTML5 and CSS3 filter properties. We will see how to make photo editing effects to blur, apply sepia, and vintage effect on a target image.
I created a simple image editing tool to apply blur, sepia, and vintage effect on a target image. Following is a live preview of the tool.
I have added a jQuery slider to allow you to fiddle with the image editing effects between a min-max range.
This example handles blur, sepia and vintage effect on an image element.
For applying the blur and sepia effects, there is a jQuery slider handle above the image target. It will allow you to change the intensity.
This code will preview four vintage tones in a row. On clicking the preview, the editor panel will apply the appropriate vintage effect.
There is an option to reset the applied image editing effects. Blur is the default effect the slider handler events apply.
File Structure
This screenshot shows the file structure of the image editing example code. It’s a pure CSS jQuery example that provides image editing features.
There are no third-party plugins used to achieve the editing effects on this example.
I have rendered a static image as a target for applying the blur and more effects. You may include an image upload option to render dynamic images.
Online photo editing UI to apply blur sepia vintage effects
This section shows the HTML of the online photo editing interface to allow image blur like effects.
The landing page has the complete HTML code for the image editing UI.
It shows the action buttons to choose the editing effects among blur, sepia and vintage.
index.php
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Effects Blur Sepia Vintage</title>
<link href="./assets/css/quickmysupport-style.css" type="text/css" rel="stylesheet" />
<link href="./assets/css/style.css" type="text/css" rel="stylesheet" />
<link href="./vendor/jquery/ui/jquery-ui.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="quickmysupport-container">
<div class="container">
<input type='button' value='Blur' class="btn action selected" />
<input type='button' id='btnSpin' value='Sepia' class="btn action" />
<input type='button' value='Vintage' class="btn" id="vintage" />
<input type='button' value='Reset' class="btn" id="reset" />
<div id="vintage-slide">
<?php
for ($i = 1; $i <= 4; $i ++) {
?>
<img src="./image/slide/vintage-slide<?php echo $i; ?>.png" class="vintage-effect" id="vintage-effect<?php echo $i; ?>" data-slide="<?php echo $i; ?>" />
<?php
}
?>
</div>
<div class="image-demo-box">
<div id="slider">
<div id="slider-handle" class="ui-slider-handle"></div>
</div>
<img src='./image/cherry-bloosm.jpg' id='image' />
<div class="overlay"></div>
</div>
</div>
</div>
<script src='./vendor/jquery/jquery-3.3.1.js' type='text/javascript'></script>
<script src='./vendor/jquery/ui/jquery-ui.min.js' type='text/javascript'></script>
<script src='./assets/js/image-edit.js'></script>
</body>
</html>