css - Hovering over one element animates another -

i learned here on stack overflow can hover on first element , animate second 1 long second 1 sits behind inside first 1 in html5.

so have example of this:

div.oblacek-hold:hover img.oblacek {     -webkit-filter: blur(0px) opacity(100%);     -o-filter: blur(0px) opacity(100%);     -ms-filter: blur(0px) opacity(100%);     filter: blur(0px) opacity(100%); } 

here img.oblacek sits inside div.oblacek-hold element , when mouse hovers on div.oblacek-hold, img.oblacek animated. works great! img.oblacek animated if hover img.oblacek , don't want.

is there way of solving using css?

please give value default !important in img.oblacek.

something this

.oblacek:hover {     -webkit-filter: blur(0px) opacity(100%) !important;     -o-filter: blur(0px) opacity(100%) !important;     -ms-filter: blur(0px) opacity(100%) !important;     filter: blur(0px) opacity(100%) !important; }  

check sample fiddle here https://jsfiddle.net/nikhilvkd/h9vjezvp/1/