Html 使图像增长并使div在悬停时滑入

我希望你能帮助我，或者给我指出正确的方向

当我将鼠标悬停在图像的父DIV上时，我试图使图像增长，但标题区域的背景也会滑入，而不是淡入

在下面的示例中，如果我使用.grow样式，则整个面板都会增大，只有当我将鼠标悬停在图像上时，图像才会增大，这不是我想要的。我也希望它更多的是溢出隐藏的影响（？）

这是我能找到的最接近的答案，但不完全如此

希望你能帮忙

.集装箱{
宽度：1270px；
}
身体{
背景色：#阿达法夫；
}
.前面板{边距：0px 10px 10px 0px；}
.img区域高度{
高度：250px；
}
.panel txt区域{
高度：180像素；
背景色：#fff；
颜色：#000；
填充：10px；
位置：相对位置；
}
.panel txt区域：悬停{
背景色：#9eab05；
颜色：#fff；
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-o型过渡：所有0.25秒缓进缓出；
-ms转换：所有0.25秒的缓进缓出；
过渡：所有0.5s缓进缓出；
}
.panel标题{位置：绝对；底部：0；}
.img小组{
背景尺寸：封面；
}
#img1{背景图像：url(http://lorempixel.com/image_output/city-q-c-640-480-9.jpg);}
/*
.grow{transition:all.2s易入易出；}
.grow:hover{transform:scale（1.1）；}*/
#面板效应{
显示：块；
/*宽度：300px；
高度：300px*/
-webkit变换：比例（1,1）；
-webkit过渡计时功能：缓解；
-webkit转换持续时间：250ms；
-moz变换：比例（1,1）；
-moz过渡计时功能：缓解；
-moz转换持续时间：250ms；
}
#面板效果：悬停{
-webkit转换：量表（1.05,1.07）；
-webkit过渡计时功能：缓解；
-webkit转换持续时间：250ms；
-莫兹变换：标度（1.05,1.07）；
-moz过渡计时功能：缓解；
-moz转换持续时间：250ms；
位置：相对位置；
z指数：99；
}

请仅为背景div提供增长效果。请在样式表中更新以下ID样式

#panel-effect .grow{
display: block;
/*width: 300px;
height: 300px;*/
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
#panel-effect .grow:hover{
-webkit-transform: scale(1.05,1.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.05,1.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}

---

这是检查这把小提琴的钥匙。这是你需要的吗

考虑下面的例子

 <div class="wrapper">
  <a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>
<a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>  
<a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>
</div>

---

你的意思是这样的吗

HTML

---

不完全是，假设图像div是300x300，我不希望div增加，只是图像。谢谢你的帮助！如此接近，近乎完美，除了我希望白色区域保持可见，当我悬停时，绿色区域将滑到后面。谢谢，不完全是，在示例中，图像的宽度大于白色区域，我希望它保持不变，但背景图像增加。

 <div class="wrapper">
  <a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>
<a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>  
<a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>
</div>

 .wrapper {
  width: 250px;
  height: 250px;
  text-align: center;
}

.wrapper img {
  margin: 4% 0;
  height: 92%;
  width: auto;
}

.wrapper img:hover {
  margin: 0;
  height: 100%;
}

<a href="#" id="panel-effect">
    <div class=" front-panel col-lg-3 col-md-3 col-sm-12">
        <div class="row">
            <div class="grow img-panel img-area-height" id="img1"></div>
            <div class="panel-txt-area">
            <p>blaaaaa</p>
            <div class="panel-title">
                <h3>TITLE &raquo;</h3>
            </div>
        </div>
    </div>
</a>

.front-panel {
  margin: 0px 10px 10px 0px;
  overflow: hidden;
  position: relative;
}

.img-area-height {
  height: 250px;
}

.panel-txt-area {
  width: 800px;
  height: 180px;
  padding: 10px;
  z-index: 99;
  background-size: 100% 200%;
  background-image: linear-gradient(to top, #9eab05 50%, #fff 50%);
  -webkit-transition: background-position 1s;
  -moz-transition: background-position
}

#panel-effect:hover .panel-txt-area {
  background-position: 0 100%;
}

.panel-title {
  position: absolute;
  bottom: 0;
}

.img-panel {
  background-size: cover;
}

#img1 {
  background-image: url(http://lorempixel.com/image_output/city-q-c-640-480-9.jpg);
}


/*
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }*/

#panel-effect .grow {
  /*width: 300px;
  height: 300px;*/
  -webkit-transform: scale(1, 1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1, 1);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
}

#panel-effect:hover .grow {
  -webkit-transform: scale(1.05, 1.07);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1.05, 1.07);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
  position: relative;
}