如何将悬停效果仅添加到包含文字的div中的图片？

Question

以下是我的示例，我希望在悬停时缩放图像，并在悬停时使用图标中间的图标显示更多文字：

<div id="grid-background">><div class="container">
            <h1>some text</h1>

    <div class="grid-container">
            <ul class="rig columns-3">
                <li class="asd">
                    <div class="rig-cell">

                    <img src="img/pri_001.jpg" />
                    <span class="rig-text"><div>read more<i class="fa fa-search"></i></div></span>
                    <span class="rig-share"><div><i class="fa fa-thumbs-up"></i><i class="fa fa-eye"></i><i class="fa fa-share"></i></div></span>

                    <h3>some text</h3>
                    <p>some text</p>
                    </div>
                </li>
            </ul>
        </div>
        </div>
</div></div>

当我在悬停时缩放图像时，它超出了文本的范围，我只想在悬停上放置透明滤镜并显示带有更多文字的图标。

的CSS

.container h1 {
    font-size: 1.3rem;
    color:#35536f;
    font-weight: 800;
    margin: 0 0 20px;
    text-align: center;
}

.container hr {
    border-top: 1px solid;
    border-color: rgba(202, 190, 158, .5); 
    border-bottom: 1px solid #fff;
    margin: 25px 0;
    clear: both;
}

.centered {
    text-align: center;
}
.container {
    width: 1200px;
    margin: 0 auto;
    direction:rtl;
    padding-top:2%;
}
#grid-background {width:100%;background:#f4f2ed;}

.grid-container {
    display:inline-block;
}

ul.rig {
    list-style: none;
    font-size: 0px;
    margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
    display: inline-block;
    *display:inline;/*for IE6 - IE7*/
    padding: 10px;
    margin: 0 0 2.5% 2.5%;
    background: #fff;
    font-size: 16px;
    font-size: 1rem;
    vertical-align: top;
    box-shadow: 0 0 5px #ddd;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position:relative;


}

.rig-cell {
    /*margin:12px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
    display:block;
    position: relative;
    overflow:hidden;
}


ul.rig li img {
    max-width: 100%;
    height: auto;
    margin: 0 0 10px;
    transform:scale(1);
    transition:all 1s;
    overflow:hidden;
    cursor:pointer;
    display:block;
    overflow:hidden;position:relative;
}
.img-cell {position:relative;}
ul.rig li .img-cell:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.4);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;cursor:pointer;
}
ul.rig li .img-cell:hover img{}


ul.rig li .img-cell:hover:after{opacity:1;}




ul.rig li h3 {
    margin: 0 0 5px;


}
ul.rig li p {
    font-size: .9em;
    line-height: 1.5em;
    color: #999;
}


ul.rig.columns-3 li {
    width: 30.83%; /* this value + 2.5 should = 33% */
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0 10px;
        padding-top:5%;
    }
    .container h1 {line-height:25px;}
}

@media (max-width: 480px) {
    ul.rig {
        margin-left: 0;
    }
    ul.rig li {
        width: 100% !important; /* over-ride all li styles */
        margin: 0 0 20px;
    }
        .container h1 {font-size:1rem}

}


.rig-text {
    display:table;
    box-sizing:border-box;
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    text-transform:capitalize;
    font-size:16px;
    font-weight:bold;
    top:50%;
    padding:1%;
    color:#fff;z-index:999;text-shadow: 2px 2px 2px black;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    transform:translateY(-20px);
    transition:all .3s;cursor:pointer;
}
.rig-share {
    display:table;
    box-sizing:border-box;
    position:absolute;
    left:0;
    font-size:20px;
    width:100%;
    text-align:center;
    top:65%;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    padding:1%;
    color:#fff;z-index:999;text-shadow: 2px 2px 2px black;
    transition:all .3s;cursor:pointer;  -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.rig-share i:hover{opacity:.6;}
ul.rig li .img-cell:hover .rig-share{
    opacity: .8;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.rig-share i {margin:0 5px;}

ul.rig li .img-cell:hover .rig-text {
    transform:translateY(0px);
    opacity:0.9;transition-delay:.1s;
}
ul.rig li .img-cell:hover .rig-text2 {
  -webkit-transform: translate3d(0px, 0px, -30px) rotateX(30deg);
  -moz-transform: translate3d(0px, 0px, -30px) rotateX(30deg);
  -ms-transform: translate3d(0px, 0px, -30px) rotateX(30deg);
  transform: translate3d(0px, 0px, -30px) rotateX(30deg);}

我添加了一个div包含图像，图标和阅读更多，但在PHP上效果不起作用我想删除div并保持一切正常。