Thursday, December 30, 2021

Apply a Blur Effect in the image

 Apply a Blur Effect in the image


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Apply a blur Effect in the image</h1>

<img src="pin.jpg" width="300" height="300">

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>


</body>


</html>


CSS Blur Effect Style

 img{

  -webkit-filter: blur(5px);

  filter: blur(5px);

}

No comments:

Post a Comment

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...