1

ホバー時に画像を拡大できるCSSを少し見つけましたが、ほとんどの場合、うまく機能します。

私の問題は、特定のサイズのすべての画像を処理していて、それがうまく機能したことです。現在、2つの異なるサイズの別のページにいるので、別のcssクラスを作成する必要があります。

http://jsfiddle.net/fj8hP

jsFiddleは私のサイトと同じようには機能しません...しかし、それは私の問題のより良い視覚化を提供します。

画像の上の部分である白いボックスは、画像サイズと直接的な相関関係があるようです。私はすべて短い幅と長い画像を持っていたので、それは問題ありませんでしたが、現在はより広い画像を扱っており、画像全体にまたがるボックスは好きではありません。したがって、この部分で幅を300pxに設定すると

ul.enlarge2 span {
    position:absolute;
    height:10px;
    width:300px;
}

画像は希望のサイズで表示されます。100以下で、画像の中央に配置したい。何か案は?

CSSは次のとおりです。

ul.enlarge2 {
    list-style-type:none;
    /*remove the bullet point*/
    margin-left:0;
}
ul.enlarge2 li {
    display:inline-block;
    /*places the images in a line*/
    position: relative;
    z-index: 0;
    /*resets the stack order of the list items - later we'll increase this*/
    margin:5px 10px 0 10px;
}
ul.enlarge2 img {
    background-color:#eae9d4;
    padding: 6px;
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
ul.enlarge2 span {
    position:absolute;
    height:10px;
    width:100px;
    left: -9999px;
    background-color:white;
    padding: 10px;
    font-family:'Droid Sans', sans-serif;
    font-size:.9em;
    text-align: center;
    color: transparent;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .75));
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .75);
    box-shadow: 0 0 20px rgba(0, 0, 0, .75);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius:8px;
}
ul.enlarge2 li:hover {
    z-index: 150;
    cursor:pointer;
}
ul.enlarge2 span img {
    padding:2px;
    background:#ccc;
}
ul.enlarge2 li:hover span {
    top: 100px;
    /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: 0px;
    /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge2 li:hover:nth-child(2) span {
    left: -200px;
}
ul.enlarge2 li:hover:nth-child(3) span {
    left: -200px;
}
ul.enlarge2 img, ul.enlarge span {
    behavior: url(pie/PIE.htc);
}
4

1 に答える 1

1

テキストを中span1に入れて、cssforul.enlarge2 spanの新しいタグにwhatsを入れる必要がありますspan1。そうすれば、そのホワイトボックスを簡単に操作できます。また、あなたは中心になるために作る必要がdisplay:blockあります。margin:0 autospan1

ul.enlarge2 span{
position:absolute;
left: -9999px;
background-color:white;
}

その部分で必要なのはこれだけです。他のすべてはspan1タグに入れられます。

これは別の写真のフィドルですhttp://jsfiddle.net/JVQp7/

これを行う最もエレガントな方法ではない可能性があり、スパン内にdivを配置したため、検証されない可能性があります。

画像を前に置く前にボックスを表示したい場合span1http://jsfiddle.net/JVQp7/1/

于 2013-03-17T01:58:14.950 に答える