CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 2174

Show parent div on hover child

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>

enter image description here

Upvotes: 0

Views: 209

Answers (1)

Khader Handal
Khader Handal

Reputation: 88

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

Upvotes: 1

Related Questions