Question

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

由于

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

Answer 1

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

Answer 2

可能这是你想要的那个

<强> 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 唯一。

Answer 3

您有2个具有相同ID的范围：

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

更改ID =＆＃34; block1＆＃34; to class =＆＃34; block1＆＃34;并且不要忘记在你的CSS中改变它。

CSS3过渡效应问题

3 个答案: