Show parent div on hover child

Question

Fiddle

When hovering .blur or on white section caption div, then only the white section should cover entire div.How to do this? But currently when hovering on image this effect is taking place.

 .cuadro_intro_hover:hover .caption{ opacity: 1; transform: translateY(-200px); -webkit-transform:translateY(-200px); -moz-transform:translateY(-200px); -ms-transform:translateY(-200px); -o-transform:translateY(-200px); } 

 <div id="myCarousel" class="carousel slide cuadro_intro_hover" style="height:300px;"> <div class="carousel-inner"> <div class="active item"> <div class="fill" style="background-image:url('https://lh3.googleusercontent.com/xnls2cFDnYU1ubdQ-m6suh2-wZnBfZ8nMNwt_X_8NHiPLtIiY5KSk0HnhvhIi4-ic_LBqi2m6Q=s700-h280-e365-rw');"> <div class="container"> </div> </div> <div class="caption"> <div class="blur" style="margin-top: 50px;"></div> <div class="caption-text" style="top: 40px;"> <p style="padding: 30px 15px;">Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> </div> </div> </div> </div> <div class="pull-center"> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </div> </div> 

Answer 1

The problem of your code is that this line:

<div class="blur" style="margin-top: 50px;"></div>

and the line of the caption text is out of the DIV above. So, it will not work like this in CSS, unless you move the caption code inside the Blur DIV, or by making it via JS like "stealthwang" comment said.

Update: Check the following code: http://www.bootply.com/eyYNppYnrG