股利放大，當鼠標過來

Question

我的網站：http://acamate.com/a/index.php

我想擴大工作盒，當鼠標過來。我用css做了這個，但是當這些框放大時，底線將進入底線。

我想要像fiverr.com。在fiverr中，當框放大時，底線不會影響並顯示用戶名。我怎樣才能做到這一點？ CSS，jQuery或Javascript。感謝您的幫助

https://www.fiverr.com/categories/online-marketing/#layout=auto&page=1

我的代碼：

的style.css

#box {margin-top:31px; padding:1px;margin-left:30px; height:234px;float:left;width:218px;background-color:#fff;box-shadow: 0 0 3px; 
-webkit-transition-property: height; 
-webkit-transition-timing-function; 
ease-in; 
-webkit-transition-duration:0.1s; 
-webkit-transition-delay:0.0s; 
} 

#box img{width:218; height;147px;} 

#box:hover { 
    height: 254px;} 

PHP

echo'<div id="box"><img src='.$categ2.' style=color:#555555>'.$categ1.'</a></div>'; 

Answer 1

好吧，如果你發現你所提供的網站上，一些其他的事情發生，而你將鼠標懸停在一個項目：

• 四四方方的項目本身並不會增加它的高度，而是它有一個固定的高度（它與w/hover相同）和一個溢出：隱藏應用於它
• 和一個內部包裝（裏面改變它的高度），它包含兩個子div，一個是可見的，一個是隱藏的。
• 上懸停在四四方方的項目，內包裝材料改變其高度，以一個更大的顯示隱藏的div孩子裏面
• 四四方方的項目你徘徊得到一些頂邊推一個下面，你可以只有通過CSS複製，通過一些第n個孩子的規則，如果你有一個固定的網格大小，但不能在全寬格，不僅與CSS，無論如何，你會需要一些JS做

然而，如果你只想讓你的生產線保持完整，當你將鼠標懸停在物品上時，你可以:(有更多的解決方案，但首先想到這些）

• 解決方案1 ​​
• 的你框格包裹的內容，另一種包裝內，並與像這樣懸停內包裝材料的高度發揮（見demo）

*, 
 
*:after, 
 
*:before { 
 
    box-sizing: border-box; 
 
} 
 
#main { 
 
    padding: 20px; 
 
} 
 
.box { 
 
    width: 218px; 
 
    height: 257px; 
 
    /*set the outer parent height to match the height of initial content + hidden content + some margin push*/ 
 
    overflow: hidden; 
 
    float: left; 
 
    margin-top: 0; 
 
    margin-left: 30px; 
 
    padding: 1px; 
 
    transition: all .2s ease-in-out; 
 
} 
 
.inner-box-content { 
 
    height: 230px; 
 
    background-color: #fff; 
 
    box-shadow: 0 0 3px; 
 
    transition: all .2s ease-in-out; 
 
} 
 
.initial-content { 
 
    height: 220px; 
 
} 
 
.hovered-content { 
 
    opacity: 0; 
 
    height: 30px; 
 
    background: cyan; 
 
    transition: all .2s ease-in-out; 
 
} 
 
.box:hover .inner-box-content { 
 
    height: 250px; 
 
    /*show the hidden div: add up the initial-content height + hovered-content height*/ 
 
} 
 
.box:hover .hovered-content { 
 
    opacity: 1; 
 
}

<div id='main'> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='box'> 
 
    <div class='inner-box-content'> 
 
     <div class='initial-content'> 
 
     Just your regular css box here 
 
     </div> 
 
     <div class='hovered-content'> 
 
     A sneaky content over here! 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

OR

• 解決方案2
• 您可以用負下邊距值，隱藏的內容的高度，拉的時候懸停， 像這樣（見demo）

.box { 
 
    margin-top: 31px; 
 
    padding: 1px; 
 
    margin-left: 30px; 
 
    height: 234px; 
 
    float: left; 
 
    width: 218px; 
 
    background-color: #fff; 
 
    box-shadow: 0 0 3px; 
 
    /* -webkit-transition-property: height; */ 
 
    /* -webkit-transition-duration: 0.1s; */ 
 
    /* -webkit-transition-delay: 0.0s; */ 
 
    transition: all .2s ease-in-out; 
 
} 
 
.box:hover { 
 
    height: 254px; 
 
    /*add increased height difference by 20px*/ 
 
    margin-bottom: -20px; 
 
    /*a negative value meaning the height of your inner content or some increased height difference*/ 
 
}

<div id='main'> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
    <div class='box'> 
 
    A box 
 
    </div> 
 
</div>

希望這有助於！

Answer 2

雖然這不是完整的答案，你可能想看看它： http://jsfiddle.net/7qoxh0sw/

---

HTML：

<div class="box"> 
    <h1>1</h1> 
    <div>"user details"</div> 
</div> 

<div class="box"> 
    <h1>2</h1> 
    <div>"user details"</div> 
</div> 

<div class="box"> 
    <h1>3</h1> 
    <div>"user details"</div> 
</div> 

<div class="box"> 
    <h1>4</h1> 
    <div>"user details"</div> 
</div> 

<div class="box"> 
    <h1>5</h1> 
    <div>"user details"</div> 
</div> 

<div class="box"> 
    <h1>6</h1> 
    <div>"user details"</div> 
</div> 

<div class="box"> 
    <h1>7</h1> 
    <div>"user details"</div> 
</div> 

---

CSS

.box{ 
    /*important css*/ 
    height: 150px; 
    width: 100px; 
    display: inline-block; 
    transition: margin 1s; 
    position: relative; 
    margin: 10px; 

    /*useless css - used only for visuals*/ 
    background: #aaa; 
    color: white; 
    text-align: center; 
} 

.box div{ 
    /*important css*/ 
    display: block; 
    height: 0px; 
    position: absolute; 
    top: 100%; 
    transition: height 1s; 
    width: 100%; 

    /*useless css - used only for visuals*/ 
    background: red; 
    text-align: center; 
} 
.box:hover{ 
    /*60px because 50px(from next css rule) + 10px(from margin in `.box` rules)*/ 
    margin-bottom: 60px; 
} 
.box:hover div{ 
    height: 50px; 
} 

---

這應該給你關於進入實現你想要的效果的CSS一個基本思路。所有你需要做的就是改變你的HTML格式，其中用戶的詳細信息是div class="box"的子div，絕對位置。其餘的只是懸停在盒子div上的CSS效果。