Show parent div on hover child

Question

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

@SleekGeek http://www.bootply.com/KJZKC1Xevk – Dan Jan 10 '15 at 21:40 — Dan, Jan 10 '15 at 21:40

Khader Handal · Accepted Answer · 2015-01-12T14:51:57.690

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

edited Jan 12 '15 at 14:51

answered Jan 10 '15 at 21:48

Khader Handal

68
1
8

can you please edit the demo http://www.bootply.com/KJZKC1Xevk please , to see really your logic works – Dan Jan 10 '15 at 21:51
`Please understand my question and then reply.` 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 any part of the image , this effect is taking place. – Dan Jan 10 '15 at 21:56
Thanks your answer.Please update your answer , and mention what you made new changes so now that its working correctly – Dan Jan 11 '15 at 13:46
done! thank you or your help.can you also upvote my question. The other guy seems downvoted it becoz i have not accepted his answer – Dan Jan 12 '15 at 16:28

Show parent div on hover child

1 Answers1