Question

HTML：

<div class="box">
    <div class="caption">
        <h3>This is Image One</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo dolor in dui lacinia gravida.</p>
    </div>
    <img src="http://i.stack.imgur.com/46ccz.jpg" />
</div>

如何修改代码，以便H3在hover之前保持可见状态，从而滚动整个内容。

Answer 1

另一种方法是jQuery动画。请参见下面的示例。

$(document).ready(function() {
	$('.box').mouseenter(function(){
			$('.caption').stop().animate({height: "94%"});
		
		
    });	
    
    $('.box').mouseleave(function(){
			$('.caption').stop().animate({height: "15%"},  500, function() {
            });
		
    });
	});

.box {
	  position: relative;
	  float: left;
	  width: 300px;
	  height: 300px;
	  margin-right: 20px;
	}
	.last {
	  margin-right: 0;
	}
	.caption {
	  position: absolute;
	  background: #000;
	  opacity: 0.7;
	  bottom: 0;
	  left: 0;
	  width: 90%;
	  height: 15%; /* Auto can still work for the height */
	  padding: 5%;
	  color: #fff;
      padding-top:1%;
	}
	.full-height {
	  height: 90%;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="caption">
    <h3>This is Image One</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo dolor in dui lacinia gravida.</p>
  </div>
  <img src="http://i.stack.imgur.com/46ccz.jpg" />
</div>

<强> See on Fiddle

注意：请在整个代码段上全屏查看它是否正常工作，

Answer 2

一种方法（没有jQuery;纯CSS），就是在max-height元素上设置.caption。此外，还要为transition属性设置一个值。然后，当鼠标悬停在.box元素上时，将max-height元素的.caption增加到100%。

Updated Example

.caption {
    /* other styling.. */
    max-height: 120px;
    transition: max-height 2s ease;
}
.box:hover .caption {
    max-height: 100%;
}

您还可以转换min-height：

请查看此updated example，了解它适用于动态内容量。

.caption {
    transition: min-height 1s ease;
    position: absolute;
    bottom: 0;
    min-height: 40px;

}
.box:hover .caption {
    min-height: 100%;
}

如何显示部分标题并在悬停时向上滑动整个标题

2 个答案: