CSS3悬停效果重新定位问题

Question

I'm trying to get this CSS effect into the middle of all of these boxes, and add a fade just like this site demo's http://dinolatoga.com/demo/webkit-image-hover-effects/ (the bottom right effect) But I don't know how to re-size the effect to fit into these boxes here's happens when I run my code http://jsfiddle.net/TWebQ/ 我正在尝试将此CSS效果放入所有这些框的中间，并添加淡入淡出效果，就像本网站演示的http://dinolatoga.com/demo/webkit-image-hover-effects/ （右下角的效果）但是我不知道如何调整效果的大小以适合这些框，当我运行代码http://jsfiddle.net/TWebQ/时，就会发生这种情况

and here's my code: 这是我的代码：

<! DOCTYPE HTML>
<html>
<head>
<div>

    <img src="http://img.photobucket.com/albums/v604/Ema/header-winter-castle-900x200.jpg" class="banner">
    </>



</div>

<style media="screen" type="text/css">



.container{
    overflow:hidden;
    width:450px;
    margin:0px auto;

}
.box{
    width:200px;
    height:200px;
    float:left;
    background-color:#ccc;
    margin-bottom:20px;
    border:1px solid black;
    padding:1px;


}

.spacing{
    margin-right:20px;
}

.banner{
 margin:0 auto;
display:block;
border:4px solid black;
padding:5px;
}

#one{
 position:relative;
 }
 #one img{
 position:absolute;
 top:0;
 left:0;
 z-index:0;
 }
 #one .detailsone{
 opacity: .9;
 position:absolute;
 top:100;
 left:150;
 z-index:999;
 -webkit-transform: scale(0);
 -webkit-transition-timing-function: ease-out;
 -webkit-transition-duration: 250ms;
 padding-right:200px;
 }
 #one:hover .detailsone{
 -webkit-transform: scale(1);
 -webkit-transition-timing-function: ease-out;
 -webkit-transition-duration: 250ms;
 padding-right:100px;

 }  
</style>

</head>
<body>
<div class="container">

    <div class="box spacing" id="one";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%">

    </a>
    <div class="detailsone"> 
    <h1 style="color:black"> <u> Enter </u> </h1> 

    </div>
    </div>
        <div class="box spacing"id="two";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"  width="100%">

        </a>
    <div class="detailstwo"> 
    <h1 style="color:black"> <u> Enter </u> </h1> 

    </div>
        </div>

            <div class="box spacing"id="three";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"  width="100%">

            </a>
        <div class="detailsthree"> 
    <h1 style="color:black"> <u> Enter </u> </h1> 

    </div>
            </div>
                <div class="box spacing"id="four";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"  width="100%" >

                </a>
                <div class="detailsfour"> 
<h1 style="color:black"> <u> Enter </u> </h1> 

</div>


</div>
</div>

</body>
</html>

Any help would be appreciated, If I find a answer I'll update this thread, Thank you for reading. 任何帮助，将不胜感激，如果我找到答案，我将更新此线程，谢谢您的阅读。

Answer 1

First you do have to cleanup your HTML to something like this: 首先，您必须将HTML清理为如下所示：

<body>
<div>
    <img src="http://img.photobucket.com/albums/v604/Ema/header-winter-castle-900x200.jpg" class="banner"/>
</div>
<div class="container">
    <div class="box spacing" id="one">
        <a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/></a>
        <div class="detailsone">
            <h1>Enter</h1>
        </div>
    </div>
    <div class="box spacing" id="two">
        <a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/></a>
        <div class="detailstwo">
            <h1>Enter</h1>
        </div>
    </div>
    <div class="box spacing" id="three">
        <a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/></a>
        <div class="detailsthree">
            <h1>Enter</h1>
        </div>
    </div>
    <div class="box spacing" id="four">
        <a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/></a>
        <div class="detailsfour">
            <h1>Enter</h1>
        </div>
    </div>
</div>
</body>

Also, you might want to consider if you do want to use multiple H1 tags without a good reason. 另外，您可能要考虑是否确实没有充分的理由使用多个H1标签。 read more about this in the article on-page-seo-multiple-h1-elements on website-in-a-weekend.net/ 在website-in-a-weekend.net/ 上的page-seo-multiple-h1-elements中阅读有关此内容的更多信息/

And if your css is like this it will work: 如果您的CSS像这样，它将起作用：

.container{
    overflow:hidden;
    width:450px;
    margin:0 auto;

}
.box{
    width:200px;
    height:200px;
    float:left;
    background-color:#ccc;
    margin-bottom:20px;
    border:1px solid black;
    padding:1px;
}

.spacing{
    margin-right:20px;
}
.banner{
    margin:0 auto;
    display:block;
    border:4px solid black;
    padding:5px;
}
#one{
    position:relative;
    height:200px;
    width:200px;
}
#one img{
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}
.box h1{
    color:black;
}
#one .detailsone{
    height:200px;
    width:200px;
    opacity: .9;
    position:absolute;
    text-align:center;
    z-index:999;
    -webkit-transform: scale(0);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
}
#one:hover .detailsone{
    -webkit-transform: scale(1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
}

See it in action on this jsFiddle: http://jsfiddle.net/jwvanveelen/KW5Uh/ 在此jsFiddle上查看其运行情况： http : //jsfiddle.net/jwvanveelen/KW5Uh/

CSS3悬停效果重新定位问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-05-30 07:29:45

CSS3悬停效果重新定位问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-05-30 07:29:45

解决方案1
0 已采纳 2013-05-30 07:29:45