Hover effect over div with image and text - html

Question

I provide a JSFiddle: https://jsfiddle.net/om83Ljtm/
It contains of a div, img, and span element. The img acts as a background-image to the div. I do not use CSS background-property for the background-image because I want to change the opacity when hovering the div. The span contains text which overlaps the background image. When hovering the div, I want to change the opacity of the image. This works, however, when the mouse hovers the text (span), the opacity of the img changes back to the initial value 0.6. But I want the image to not (!) change back its opacity when I hover over the text. How can this be achieved?
To sum up: In the JSFiddle, if I hover over the div, the opacity changes to 1. This should remain, even if I hover over the text in the span. This does not work, yet.

Answer 1

Use .event:hover img instead of .event img:hover
.event {
width: 200px;
position: relative;
border: 1px solid #dddddd;
height: auto;
}
.event .titel {
float:left;
font-size: 20px;
background-color:white;
padding:3px;
position:absolute;
top:50px;
left:5px;
}
.event img {
opacity: 0.6;
width: 100%;
}
.event img {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.event:hover img {
opacity: 1;
}
<div class="event">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
<span class="titel">text text text text text text text text text </span>
</div>

Answer 2

you can achieve this by giving hover to div not on img here you go: https://jsfiddle.net/om83Ljtm/2/
.event:hover img {
opacity: 1;
}

Answer 3

Just like this ;)
.event {
width: 200px;
position: relative;
border: 1px solid #dddddd;
height: auto;
}
.event .titel {
float:left;
font-size: 20px;
background-color:white;
padding:3px;
position:absolute;
top:50px;
left:5px;
}
.event img {
opacity: 0.6;
width: 100%;
}
.event img {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.event:hover img { /* Just change this */
opacity: 1;
}
<div class="event">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
<span class="titel">text text text text text text text text text </span>
</div>