鼠标悬停时如何将图像滑过另一个图像？

Question

HTML

<img id="1" src="http://tinyurl.com/ksl52ao"/>
<div class="wrap" id="2">
    <img src="http://tinyurl.com/lgua65m"/>             
    <p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>

CSS

.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}

.text_over_image {
    position: absolute;
    margin: auto;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    color:RED;  
    height:0px;
}

的jQuery

$("#2").hide();

$("#1").mouseover(function(){
    $("#1").hide();
    $("#2").show();
});

$("#2").mouseout(function(){
    $("#2").hide();
    $("#1").show();
});

这里我可以在鼠标悬停在另一个图像上时显示隐藏的图像。但是鼠标悬停时我需要从底部到顶部滑动第二张图像。 JSFIDDLE

Answer 1

以下申请将为您提供所需的效果。

     
$(function(){
	$("#container").hover(function(){
		$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
	}, function() {
		$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
	});
});

#container {
	margin:100px auto;
	width:909px;
}
#container {
	margin-right:3px;
	float:left;
	width:296px;
	height:130px;
	border:1px solid #999;
	position:relative;
	overflow:hidden;
}
#container img {
	position:absolute;
}
.text_over_image {
    position: absolute;
	margin: auto;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    color:RED;	
	height:0px;
}

.simg{
    position:relative;
    top:130px;
    left:0;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
	<div class="fimg"><a href="#"><img height="130px" width="100%" src="http://tinyurl.com/ksl52ao" alt="" /></a>
    </div> <div class="simg"> 
    <a href="#"><img height="130px" width="100%" src="http://tinyurl.com/lgua65m" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p></a>
    </div>

检查Fiddle.

您也可以查看Fiddle here.

Answer 2

这可以使用纯css实现，无需js：

.wrap img {
  height: 100%;
  100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 1s;
}
.wrap {
  position: relative;
  height: 300px;
  width: 300px;
  transition: all 1s;
  overflow: hidden;
}
.wrap img:last-child {
  top: 100%;
}
.wrap:hover img:first-child {
  top: -100%;
}
.wrap:hover img:last-child {
  top: 0;
}
.wrap p {
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  width: 100%;
  height: 30px;
  color: white;
  transition: all 1s;
  z-index: 8;
}
.wrap:hover p {
  opacity: 1;
}

<div class="wrap">
  <img src="http://placekitten.com/g/300/300" />
  <p>some text too</p>
  <img src="http://placekitten.com/g/500/500" />
</div>