懸停時的跨度和圖像大小放大

我發現了一點css，允許您在懸停時放大圖像，而且大部分情況下它的效果很好。懸停時的跨度和圖像大小放大

我的問題是我一直在處理一定大小的所有圖像，它對他們很好，現在我在另一個頁面上有兩種不同的大小，所以我必須做另一個CSS類。

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

來源

2013-03-16 BrettD

您的HTML無效。 UL的唯一允許的孩子是LI。 – isherwood 2013-03-17 01:02:20

這完全不清楚你想要什麼。「圖像將以所需尺寸縮短」是什麼意思？請編輯你的問題來澄清。 – isherwood 2013-03-17 01:08:39

我的意思是它會顯示在所需的大小。 @isherwood – BrettD 2013-03-17 01:17:39

你需要把裏面的文字span1放什麼在ul.enlarge2 span到一個新的標籤在CSS的span1。這樣你可以更容易地操作那個白色盒子。您還需要display:block和margin:0 auto才能使span1居中。

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

這是你在這部分一切需要進入span1標籤。

這裏是一個不同的圖片http://jsfiddle.net/JVQp7/

撥弄它可能不是這樣做的最優雅的方式和我已經把裏面的div跨度等

如果你想它可能不驗證框在圖像之前出現span1之前。 http://jsfiddle.net/JVQp7/1/

來源

2013-03-17 01:58:14 btevfik

啊哈！這正是我所期待的。非常感謝你，當我打到15代表我會給它一個upvote！ – BrettD 2013-03-17 02:06:47

@BrettD你仍然可以選擇它作爲解決方案。你需要50代表upvote。 – btevfik 2013-03-17 02:09:41

懸停時的跨度和圖像大小放大

回答

相關問題