Нужно сделать так что бы при наведении мышкой на собаку - заблюрилась кошка, а при кошке - заблюрилась собака,подскажите пожалуйста как реализовать?
.images{
width:200px;
height:200px;
background-color:blue;
float:left;
background-image: url("https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg");
background-size: cover;
}
#cat{
float:right;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
background-size: cover;
}
#dog:hover{
filter: blur(4px)
}
#cat:hover{
filter: blur(4px)
}
#block{
width:500px;
margin:0 auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="block">
<div class="images" id="dog"></div>
<div class="images" id="cat"></div>
</div>
</body>
</html>