Question

我正在尝试将这个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>

任何帮助将不胜感激，如果我找到答案我会更新这个帖子，谢谢你的阅读。

Answer 1

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

CSS3悬停效果重新定位问题

1 个答案: