CSS3过渡效果问题

我目前正在尝试学习CSS3技术以在我的网站上实施。我发现这个代码在线滑动图像框（http://www.pixelforlife.com/html-css3-sliding-image-boxes/）。当你将鼠标悬停在盒子上时，它应该向上移动，以显示隐藏在其后面的文字。问题是当我在Chrome，Firefox或IE上运行它时，平滑过渡效果不起作用。我试图改变webkit的值和东西，但仍然无法实现它的工作。任何帮助将不胜感激。CSS3过渡效果问题

感谢

<!doctype html> 
<html lang="en"> 
<head> 
    <title> www.PixelForLife.com - Sliding Block </title> 

<style type="text/css"> 
body { font: 13px sans-serif; } 

#montage-wrap { width: 820px; height: 200px; } 
.montage-block { width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative; 
     margin: 0 4px 0 0; background: white; border: 1px solid #666;} 
.montage-block:last-child { margin: 0; } /* removes margin on last block */ 

#block1 { width: 200px; height: 200px; position: absolute; display: block; 
     background: url("pixelforlife_thumb.png") no-repeat; 

     -webkit-transition: top .3s ease-in-out; } 

.montage-block:hover #block1 { top: -150px; } 

.thumb_content { padding: 70px 15px 0 15px; color: #777; } 
.thumb_content h1 { margin: 0 0 5px 0; color: #666; font-size: 14px; } 


</style> 
</head> 
<body> 

<div id="montage-wrap"> 

    <div class="montage-block"> 
     <span id="block1"></span> 
     <div class="thumb_content"> 
      <h1>Sample Title</h1> 
      <p>This is some sample title. yay for text.</p> 
     </div> 
    </div> <!-- block end --> 

    <!-- A sample Block --> 
    <div class="montage-block"> 
     <span id="block1"></span> 
     <div class="thumb_content"> 
      <h1>Sample Title</h1> 
      <p>This is some sample title. yay for text.</p> 
     </div> 
    </div> <!-- block end --> 

</div> <!-- montage wrap --> 


</body> 
</html>

来源

2014-04-07 arahman206

请http://jsfiddle.net/ – ShibinRagh

你有2个跨度具有相同的ID：

<span id="block1"></span>

更改ID = “块1” 类= “块1”，不要忘记去改变它在你的CSS也是。

来源

2014-04-07 06:38:07 Core972

我改变了CSS position: top到margin:top

它的工作对我来说

#block1 { 
     width: 200px; 
     height: 200px; 
     position: absolute; 
    transition: all 0.5s ease-in-out; 
    } 
    .montage-block:hover #block1 { 
     margin-top: -100px; 
    }

Demo

来源

2014-04-07 06:40:35 ShibinRagh

如果你有这个想法，你可以管理这个代码 – ShibinRagh

这是行得通的！非常感谢您的快速回复。 :) – arahman206

也许这是你想要

DEMO HERE

的一个

#block1 { 
    background: url("pixelforlife_thumb.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: block; 
    height: 200px; 
    position: absolute; 
    top: 0; 
    transition-delay: 0.5s; 
    transition-duration: 1.5s; 
    transition-property: top; 
    width: 200px; 
    }

和悬停

#block1:hover { 
    top: -150px ; 
}

不相同的页面上使用相同的ID。 ID是唯一每页。

来源

2014-04-07 06:52:46

CSS3过渡效果问题

回答

相关问题