Show div on hover on same position

Question

I am trying to show div on mouseover, but it's flickering, how do I show/hide without any jerk and smooth with the transition?

I have tried the fade in/out using jquery as well but still blinking.

Here is the code

body {
	margin: 0;
}
.row {
	float: left;
	width: 100%;
}
.col {
	float: left;
	width: 25%;
	position: relative;
	margin: 0 10px 0 0;
}
.front {
	width: 100%;
	height: 300px;
	background-color: #999
}
.back {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	opacity: 0;
	visibility: hidden;
	background-color: #ff0;
	z-index: 2;
	width: 100%;
}
.front:hover + .back {
	opacity: 1;
	visibility: visible;
}

<div class="row">
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
</div>

Answer 1

It flickers because every time .back becomes visible, hover on .front is no longer valid. To solve for this you can set visibility of .back as visible on .back:hover which can be done by using the same css style for .back:hover as for .front:hover + .back

body {
	margin: 0;
}
.row {
	float: left;
	width: 100%;
}
.col {
	float: left;
	width: 25%;
	position: relative;
	margin: 0 10px 0 0;
}
.front {
	width: 100%;
	height: 300px;
	background-color: #999
}
.back {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	opacity: 0;
	visibility: hidden;
	background-color: #ff0;
	z-index: 2;
	width: 100%;
}
.front:hover + .back,
.back:hover {
	opacity: 1;
	visibility: visible;
}

<div class="row">
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
</div>