html - 在图库中闪烁悬停

Question

我在图库 (html+css) 中遇到闪烁的悬停问题。我找不到解决方案。谁能帮我解决这个问题？

Code on jsfiddle.com

HTML:
 <div id="gallery">
            <div class="col-sm-6 photo-1">
                <div class="transparent-gallery">
                    <h3>Photo Caption</h3>
                    <p>Donec sodales semper porttitor.</p>
                </div>
            </div>
</div>

CSS: 
            #gallery .photo-1{
            background-image:url(http://img2.wikia.nocookie.net/__cb20130326013809/camp-dublin-roleplay/images/e/ec/Camden-town.jpg);
            background-size: cover;
            height:300px;
        }

        .transparent-gallery{
            background: rgba(36, 43, 46, 0.8);
            background-size: cover;
            height:300px;
            width:100%;
            position:absolute;
            text-align: center;
        }

        .transparent-gallery h3, .transparent-gallery p{
            visibility:hidden;
        }

        .transparent-gallery:hover h3, .transparent-gallery:hover p{
            visibility:inherit;
        }

        .transparent-gallery:hover{
            background: rgba(36, 43, 46, 0.95);
            height:110px;
            top:200px;
        }

我是初学者，这段代码当然可以做得更好......

Answer 1

这些属性应该这样设置

#gallery:hover .transparent-gallery h3, #gallery:hover .transparent-gallery p{
    visibility:inherit;
}

#gallery:hover .transparent-gallery{
    background: rgba(36, 43, 46, 0.95);
    height:110px;
    top:200px;
}

Example here

This way, basically we are telling the code to do this:

When #gallery:hover Show this => .transparent-gallery