How do I unblur an image on hover with css and javascript?-CodePudding

EDIT: Thank you to all who answered! The solutions worked and it is great. The reason I used javascript is because the person I originally asked for help from told me to use it and we both forgot that hover existed in css. Again, thank you!

I am making a website for a school project and want to blur/censor an image and have it unblur/uncensor the image when hovered over but I'm running into issues with making that happen.

Here is my code:

uncensor.onmouseover = function(x){
    censor.style.filter = "none"
}
censor.onmouseover = function(x){
    censor.style.filter = "blur(5px)"
}

 <img onm ousehover="uncensor(this)" onm ouseout="censor(this)" src="https://s.abcnews.com/images/International/beirut-explosion-13-ap-rc-200805_hpMain_16x9_1600.jpg" id="img-blur">
 <img onm ousehover="uncensor(this)" onm ouseout="censor(this)" src="https://media.nature.com/lw800/magazine-assets/d41586-020-02361-x/d41586-020-02361-x_18261790.jpg" id="img-blur">

#img-blur{
    filter: blur(5px);
}

CodePudding user response：

You can do that without javascript. Just use the hover selector:

img {
  filter: blur(5px);
}

img:hover {
  filter: none;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/250px-Stack_Overflow_logo.svg.png">

CodePudding user response：

You can achieve this using pure CSS:

.img-blur {
  filter: blur(5px);
}

.img-blur:hover {
  filter: none;
}

<img src="https://s.abcnews.com/images/International/beirut-explosion-13-ap-rc-200805_hpMain_16x9_1600.jpg" >
<img src="https://media.nature.com/lw800/magazine-assets/d41586-020-02361-x/d41586-020-02361-x_18261790.jpg" >

But if javascript is a must, here is a workaround: your censor and uncensor functions are receiving the element hovered on/out of, so you need to change the style for x itself (the argument). Also make sure you are not using the same id more than once - this would lead to unexpected behaviour.

const uncensor = function(x) {
  x.style.filter = "none"
}
const censor = function(x) {
  x.style.filter = "blur(5px)"
}

.img-blur {
  filter: blur(5px);
}

<img onm ouseover="uncensor(this)" onm ouseout="censor(this)" src="https://s.abcnews.com/images/International/beirut-explosion-13-ap-rc-200805_hpMain_16x9_1600.jpg" >
<img onm ouseover="uncensor(this)" onm ouseout="censor(this)" src="https://media.nature.com/lw800/magazine-assets/d41586-020-02361-x/d41586-020-02361-x_18261790.jpg" >

CodePudding user response：

There is no reason to use JavaScript to add and remove the blur. You can do it just with CSS with :hover

.img-blur{
    filter: blur(5px);
}

.img-blur:hover {
    filter: blur(0px);
}

<img  src="http://placekitten.com/200/300" />


<img  src="http://placekitten.com/300/300" />

If you want to do this with JavaScript add mouseenter and mouseleave to the images.

var imgs = document.querySelectorAll(".img-blur");

imgs.forEach(function (img) {
  img.addEventListener("mouseenter", function () {
    img.style.filter = 'blur(0px)';
  });
  img.addEventListener("mouseleave", function () {
    img.style.filter = 'blur(5px)';  
  });
});

.img-blur{
    filter: blur(5px);
}

<img  src="http://placekitten.com/200/300" />
<img  src="http://placekitten.com/300/300" />

CodePudding user response：

Why don't use :hover in the css? btw the way consider that you must not put same id for some elements in the page.

.img-blur {
  filter: blur(5px);
}

.img-blur:hover {
  filter: none;
}

<img src="https://fakeimg.pl/350x200/550000/?text=Image1" >
<img src="https://fakeimg.pl/350x200/000000/?text=Image1" >