link hover stoped by text - html

Question

Help i work on hover link effect, the effect is opacity. The effect is working but it stop when i hover the caption inside it its stop the effect.
here the code of the css:
a .hover11 img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
a .hover11 img:hover {
opacity: .5;
}
.imagebig {
position: relative;
width: 24%;
/* for IE 6 */
height: 60%;
background: #D9138E;
background: linear-gradient(#D9138E, rgba(0, 0, 0, 0));
border: solid 1px #FFFFFF;
display: inline-block;
}
h2 {
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
display: block;
<a href="">
<div class="imagebig hover11" align="left">
<img style="width:100%; height:100%" src="//placehold.it/100" alt="" />
<h2>Kung Fu Panda</h2>
</div>
</a>
The last one is the html. Is there anyway to stop the h2 stopping the effect when hover ? I already try user-select its not work

Answer 1

try this
a .hover11:hover img {
opacity: .5;
}
instead of this :
a .hover11 img:hover{
opacity: .5;
}

Answer 2

You have given hover effect on image tag only that's the reason your hover effect don't work on text.
So instead of giving hover effect on image tag give hover effect on outer div and it will work for both image as well as text.
Use this:
a .hover11:hover img {
opacity: .5;
}

Answer 3

Just add pointer-events: none; this will prevent the hover effect on h2
a .hover11 img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
a .hover11 img:hover {
opacity: .5;
}
.imagebig {
position: relative;
width: 24%;
/* for IE 6 */
height: 60%;
background: #D9138E;
background: linear-gradient(#D9138E, rgba(0, 0, 0, 0));
border: solid 1px #FFFFFF;
display: inline-block;
}
h2 {
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
display: block;
pointer-events: none;
}
<a href="">
<div class="imagebig hover11" align="left">
<img style="width:100%; height:100%" src="//placehold.it/100" alt="" />
<h2>Kung Fu Panda</h2>
</div>
</a>