Flickering on hover over div - html

Question

I'm trying to use a background color with some opacity on hover over a div. But i get flickering effect over the color once i hover over it. while as the element i hover over is working properly.
My code and css is as below:
<div class="flip-menu">
<section class="flip-item-wrap">
<img class="fake-image" src="http://lorempixel.com/500/500/food/11" alt=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="a">
<label for="a" class="flip-item">
<figure class="front"><img class="img_hover" src="http://lorempixel.com/500/500/food/1" alt=""></img>
</figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/1" alt=""></img>
<div class="flip-item-desc">
<h4 class="flip-item-title">Lorem ipsum dolor</h4>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
</div>
</figure>
</label>
<div style="background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
left: 1px;
opacity: 0.8;
padding: 4px;
position: absolute;
text-transform: uppercase;
top: 162px;
width: 182px;
z-index: 9999;
left: 0px;
overflow:hidden;" class="hover_div">
hhh
</div>
</section>
</div>
.img_hover:hover{
border:1px solid #888888!important;
}
.hover_div{
display:none;
}
.flip-item-wrap :hover + div{
display: block;
cursor:pointer;
}

Answer 1

I think I understand what you are trying to do. The confusion here arose because in testing your code there is an obvious flicker on the image's border, and that's what Yasser was trying to fix - which he did. But I think you are referring to something else. I suggest starting from scratch and cleaning your code up, that will make things easier - this alone will probably solve your problem. I made a fiddle that accomplishes what I believe you are after.
This should get you started in the right direction.
<style>
.main {
width:500px;
height:500px;
}
.cover {
position:absolute;
background:#ccc;
opacity:.5;
width:500px;
height:500px;
display:none;
}
.main:hover .cover {
display:block;
}
</style>
<div class="main">
<div class="cover"> </div>
<img class="img_hover" src="http://lorempixel.com/500/500/food/1" alt="">
</div>
JSFiddle

Answer 2

I am assuming the flickering to be the border which comes up and shakes the layout a bit. Add this line of css and let me know if this works for you.
.img_hover{
border:1px solid #fff !important;
}
Atlernatively you should add a jsfiddle so that we could help you better.
Edit:
A better way to do this would be this - Thanks Ruddy
.img_hover:hover {
outline:1px solid #888888!important;
}