CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Can
Can

Reputation: 13

Div enlarge when the mouse comes over

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>';

Upvotes: 1

Views: 161

Answers (2)

RGLSV
RGLSV

Reputation: 2058

Ok, if you noticed on the website you provided, some other things are happening while you hover over a item:

  • the boxy item itself doesn't increase its height, but instead it has a fixed height(its the same w/ hover) and a overflow:hidden applied to it
  • and a inner wrapper inside(that changes its height), that hold two children divs, one that is visible and one that is hidden.
  • on hover over the boxy item, the inner wrapper changes its height to a bigger one to show the hidden div child inside
  • the boxy item underneath the one you hovered gets pushed by some top margin, that you could replicated via css only, through some nth-child rules, if you had a fixed grid size, but not on a full width grid, not only with css anyway, you're gonna need some js to do that

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)

  • Solution 1
  • wrap the contents of you box div, inside another wrapper, and play with the height of the inner wrapper on hover like so (see 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

  • Solution 2
  • you can pull with a negative bottom margin value, the height of the hidden content, when on hover, like so(see 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>

Hope this helps!

Upvotes: 1

zhirzh
zhirzh

Reputation: 3449

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.

Upvotes: 0

Related Questions