Reset blur property in css / html
Question
My question is how can I put an image with a filter: blur, for later, changing the cursor for a div, and hiding it with cursor: none; and with a backdrop-filter, you can "remove" that blur, being able to sharpen the images by passing the div over them. PS: "Hover does not work because just by passing a little the image is already affected by the entire property, that is why I have to use backdrop-filter"
My code:
const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', e => { cursor.setAttribute("style", "top: " + (e.pageY - 50) + "px; left: " + (e.pageX - 50) + "px;"); })
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; } .cursor { width: 7em; height: 7em; border: 3px solid white; border-radius: 100%; position: absolute; /*Como no se puede poner un blur negativo, intente resetearlo cambiando el -5 por un 0, pero tampoco funciono*/ backdrop-filter: blur(-5px); -webkit-backdrop-filter: blur(-5px); } .peces img { height: 15vh; filter: blur(5px); }
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="peces" id="uno"><img src="images/01.png"></div> <div class="peces" id="dos"><img src="images/02.png"></div> <div class="peces" id="tres"><img src="images/03.png"></div> <div class="peces" id="cuatro"><img src="images/03.png"></div> <div class="cursor"></div> <script src="script.js"></script> </body> </html>
Thanks for your answers =)
1 answers
solution1
0 ACCPTED 2021-07-16 04:44:05
You would need to use svg for this thing. Unfortunately I don't know if any better way exists.
$('.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'); }); $('.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'); });
.pic { height:600px; } .blur { height: 100%; } .overlay { position: absolute; top: 0px; left: 0px; height: 100%; } svg image{ width:350px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="https://i.imgur.com/EJOjIMC_d.webp?maxwidth=760&fidelity=grand" ></image> <filter id="filter2"> <fegaussianblur stdDeviation="5" /> </filter> <mask id="mask1"> <circle cx="-50%" cy="-50%" r="80" fill="white" filter="url(#filter2)" /> </mask> <image xlink:href="https://i.imgur.com/EJOjIMC_d.webp?maxwidth=760&fidelity=grand" mask="url(#mask1)"></image> </svg> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.