Hover doesn't work when hovered div is inside another div - html

Question

I am building webpage with school events. On my webpage I am trying to create div(eventContainer) in which I got another div(eventImgContainer) with an image, and this image when hover do an action, e.g. blur or opacity.
The problem is that it does not respond to hover when div with img is inside any other div.
I was looking at syntax related to hover like ">" or "+" or ', '... nothing seams to work. Any ideas why?
I really want to use only css for this/
html:
<div class="eventContainer">
<div class="eventDescription"><!-- here code with event description--></div>
<div class="eventImgContainer">
<img src="1_Zdjecia/event_1/1.jpg" id="Photo1" title="football">
<p class="hidedText">Go to Gallery</p>
</div>
</div>
CSS:
.eventContainer{
z-index: -1;
position:relative;
margin:auto;
left:0;
right:0;
width:700px;
height:270px;
background-color: #E6E6E6;
border: 4px solid white;
}
.eventImgContainer{
position:relative;
width:375px;
height:217px;
top:20px;
left: 305px;
margin:0;
}
.eventImgContainer img {
position:absolute;
width:100%;
display:block;
}
.eventimgcontainer:hover #Photo1 {
opacity:0.5;
width:400;
}

Answer 1

You last css rules is wrong
.eventImgContainer:hover #Photo1 {
opacity: 0.5;
width: 400px;
}
CSS is case sensitive !
And you shouldn't have negative z-index (you should remove the z-index property or set a positive value).

Answer 2

It works for me when I just change z-index: -1; to z-index: 1;
And your last selector (eventimgcontainer) is wrong, should be "eventImgContainer". But your example works also with this lower case selector. The problem is only your z-index.
.eventContainer{
z-index: 1;
position:relative;
margin:auto;
left:0;
right:0;
width:700px;
height:270px;
background-color: #E6E6E6;
border: 4px solid white;
}
.eventImgContainer{
position:relative;
width:375px;
height:217px;
top:20px;
left: 305px;
margin:0;
}
.eventImgContainer img {
position:absolute;
width:100%;
display:block;
}
.eventImgContainer #Photo1 {
opacity:0.5;
width:400;
}

Answer 3

first of all remove the z-index
.eventContainer{
position:relative;
margin:auto;
left:0;
right:0;
width:700px;
height:270px;
background-color: #E6E6E6;
border: 4px solid white;
}
and then correct the name of the class
.eventImgContainer:hover #Photo1{
opacity:0.5;
width:400;
}