Question

我希望你能帮助或指出我正确的方向。

当我将鼠标悬停在它的父DIV上时，我正试图让图像生长，但也有标题区域的背景滑入而不是淡入。

在下面的示例中，整个面板增加，如果我使用.grow样式，图像只会在我将鼠标悬停在图像上时生长，这不是我想要的。此外，我希望它更多地超过溢出隐藏的影响（？）。

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

希望你能帮忙!!

https://jsfiddle.net/SteveDavies/zezq2cb6/

    <!-- HTML -->

<div class="content container ">
  <div class="row">

    <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>
      </div>
    </a>

    <a href="#">
      <div class=" front-panel col-lg-3 col-md-3 col-sm-12">
        <div class="row">
          <div class="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>
      </div>
    </a>

    <a href="#">
      <div class=" front-panel col-lg-3 col-md-3 col-sm-12">
        <div class="row">
          <div class="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>
      </div>
    </a>

  </div>
</div>
<!--container-->

<div style="margin-bottom:500px">
  <!--SPACER-->
</div>


<!-- CSS -->

.container{
  width:1270px;
}
body{
  background-color:#adafaf;
}

.front-panel{margin:0px 10px 10px 0px;}


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

.panel-txt-area {
   height:180px;
  background-color:#fff;
  color:#000;
  padding:10px;
  position:relative;
}

.panel-txt-area:hover{
  background-color:#9eab05;
    color:#fff;
  -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      -o-transition: all 0.25s ease-in-out;
      -ms-transition: all 0.25s ease-in-out;
      transition: all 0.5s ease-in-out;

}

.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{
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: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;
}

Answer 1

请仅为背景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;
}

以下是Demo

Answer 2

检查这个小提琴..你需要什么？

考虑以下示例

 <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>

和css

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

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

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

https://jsfiddle.net/65bpLp9y/

Answer 3

你的意思是这样的吗？：https://jsfiddle.net/2aLpw1hv/

HTML

<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>

CSS

.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;
}

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

3 个答案: