在悬停子上显示父div

Question

Fiddle

当悬停.blur或white section caption div时，只有白色部分应覆盖整个div。如何做到这一点？但是目前当悬停在图像上时，这种效应正在发生。

＆＃13;

＆＃13;

.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);
            } 

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码问题在于这一行：

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

并且标题文本的行不在上面的DIV中。 所以，它在CSS中不会像这样工作，除非你在Blur DIV中移动字幕代码，或者通过像＃34; stealthwang＆＃34;评论说。

更新：检查以下代码：http://www.bootply.com/eyYNppYnrG