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 onmousehover="uncensor(this)" onmouseout="censor(this)" src="https://s.abcnews.com/images/International/beirut-explosion-13-ap-rc-200805_hpMain_16x9_1600.jpg" id="img-blur">
<img onmousehover="uncensor(this)" onmouseout="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);
}
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">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" class="img-blur">
<img src="https://media.nature.com/lw800/magazine-assets/d41586-020-02361-x/d41586-020-02361-x_18261790.jpg" class="img-blur">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 onmouseover="uncensor(this)" onmouseout="censor(this)" src="https://s.abcnews.com/images/International/beirut-explosion-13-ap-rc-200805_hpMain_16x9_1600.jpg" class="img-blur">
<img onmouseover="uncensor(this)" onmouseout="censor(this)" src="https://media.nature.com/lw800/magazine-assets/d41586-020-02361-x/d41586-020-02361-x_18261790.jpg" class="img-blur">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 class="img-blur" src="http://placekitten.com/200/300" />
<img class="img-blur" 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 class="img-blur" src="http://placekitten.com/200/300" />
<img class="img-blur" src="http://placekitten.com/300/300" />