股利放大，当鼠标过来

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效果。