CSS3过渡效果问题

Question

I am currently trying to learn CSS3 techniques to implement on my website. 我目前正在尝试学习CSS3技术以在我的网站上实施。 I found this code online for sliding image boxes ( http://www.pixelforlife.com/html-css3-sliding-image-boxes/ ). 我在网上找到了用于滑动图像框的代码（ http://www.pixelforlife.com/html-css3-sliding-image-boxes/ ）。 When you hover over the boxes, its supposed to move upwards revealing the text hidden behind it. 当您将鼠标悬停在框上时，它应该向上移动以显示隐藏在其后面的文本。 The problem is when I run it on chrome, firefox or IE the smooth transition effect doesn't work. 问题是当我在chrome，firefox或IE上运行它时，平滑的过渡效果不起作用。 I tried to change the webkit values and stuff but still couldn't get it to work. 我试图更改Webkit的值和内容，但仍然无法正常工作。 Any help would be greatly appreciated. 任何帮助将不胜感激。

Thanks 谢谢

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

i changed the css position: top to margin:top 我更改了css的position: top到margin:top

Its worked for me 它为我工作

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

Demo 演示版

Answer 2

probably this is the one you wanted 可能这是您想要的那个

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

and on hover 然后悬停

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

don't use same id on same page. 不要在同一页面上使用相同的ID。 an ID is unique per page. 每个页面的ID是唯一的 。

Answer 3

You have 2 span with the same id : 您有2个具有相同ID的跨度：

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

Change id="block1" to class="block1" and don't forget to change it in your css too. 将id =“ block1”更改为class =“ block1”，也不要忘记在CSS中进行更改。

CSS3过渡效果问题

问题描述

3 个解决方案

解决方案1
3 2014-04-07 06:40:35

解决方案2
1 2014-04-07 06:52:46

解决方案3
0 2014-04-07 06:38:07

CSS3过渡效果问题

问题描述

3 个解决方案

解决方案1 3 2014-04-07 06:40:35

解决方案2 1 2014-04-07 06:52:46

解决方案3 0 2014-04-07 06:38:07

解决方案1
3 2014-04-07 06:40:35

解决方案2
1 2014-04-07 06:52:46

解决方案3
0 2014-04-07 06:38:07