0

我试图让这个 CSS 效果进入所有这些框的中间，并添加一个淡入淡出，就像这个网站演示的http://dinolatoga.com/demo/webkit-image-hover-effects/（右下角效果）但我不知道如何重新调整效果以适应这些框，当我运行我的代码时会发生这种情况http://jsfiddle.net/TWebQ/

这是我的代码：

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

任何帮助将不胜感激，如果我找到答案，我将更新此线程，感谢您的阅读。

4

1 回答 1

0

首先，您必须将 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>

此外，您可能需要考虑是否确实要在没有充分理由的情况下使用多个 H1 标签。在 website-in-a-weekend.net/上的文章on-page-seo-multiple-h1-elements中阅读更多相关信息

如果你的 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;
}

在这个 jsFiddle 上查看它的实际效果：http: //jsfiddle.net/jwvanveelen/KW5Uh/

于 2013-05-30T07:29:45.863 回答