My website: http://acamate.com/a/index.php
I want to enlarge job boxes when the mouse comes over. I made it with css but when the boxes enlarge, the bottom line will goes to bottom line.
I want to make like fiverr.com. In fiverr, when the boxes enlarge, the bottom line not affect and also it show username. How can I make this? CSS, jQuery or Javascript. Thank you for your help
https://www.fiverr.com/categories/online-marketing/#layout=auto&page=1
My code:
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>';
Ok, if you noticed on the website you provided, some other things are happening while you hover over a item:
However, if you only want your line to stay intact when you hover over a item, you can:(there are more solutions that these, but these ones comes to mind first)
*, *: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
.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>
Hope this helps!
although this is not the complete answer, you might want to have a look at it: 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;
}
This should give you a basic idea about the css that goes into achieving you desired effect. All you need to do is change your html to a similar format, wherein the user details is a child div to the div class="box"
, with absolute position. Rest is just css effects on hovering on box divs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.