Background image (blur) revealed with mouse action

Background image revealing is the excellent feature from CSS animation

The focus event is called on focusing, and blur – when the element loses the focus.

In this Post, I am trying to create a background image opacity / blur hover effect. I have the image as a background in the CSS, but it also blurs and fades the text. We are using a properties like position:relative;height:100%; for the image.

The id attribute of the <filter> element defines a unique name for the filter. and By using <feGaussianBlur> element we defined blur effect.

when we creating a blurred background from a give image using SVG filters, with a fade in/out, Animation based on velocity.js or jQuery animate() method. In this we are using jQuery , for mouse action so, that Background Blur image revealed with mouse action.

Lean how to create a revealing background blur image, Moving with mouse positioning and it will get appropriate order. We seen before, a bunch of code written on the paper, will erase after we will write. Similarly always mouse position clears blur.

You can add any image and set the image size with css.

Example

overlay:

Here we set the position by using absolute property and place it where you want.

pic:

Here we manage the placing with position relative.

blue:

set height with 100%

change image and replace with new path.

Follow the below function

mousemove function used and set ‘x’ position and ‘y’ position. You can change the attribute

<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
        <image filter="url(#filter2)" xlink:href="female.jpg" width="100%" height="100%"></image>
        <filter id="filter2">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="40" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="female.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", (upX) + 'px');
});
</script>

Follow below style properties

   <style>
 body {
    margin: 0;
}
.pic {
    text-align: center;
    position: relative;
    height:600px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}
 </style>

Follow below div structure

Browser support

Supports across the all standard browsers with latest versions.

Here you will find complete guide about background blur, which tags and style properties we used.
Add more beauty to your site by using this, use this simple code follow the below steps.

When we hover over on a image then the original image is revealed.

Leave a Reply

Your email address will not be published. Required fields are marked *