hide a part and show when mouse hover css HTML

[chrisschristou]

hello firends
i have more tha 30 div block as list of product it containt like this

<div class="itemlist" id="itemlist">
        <ul>
          <li><img src="cover/imshge.jpg"</li>
          <li class="iteminfo" id="iteminfo"><"item desciption"></li>
          <li> <?php echo ['price']; ?></li>
        </ul>
      </div>

and i want to description can have 4 or 5 line of text but i want to hide it it show only 2 line but when mouse hover the div itemlist it must have a thin border and show the rest of iteminfo.

#itemlist {
    clear: none;
    float: left;
    margin-left: 2.8698%;
    margin-bottom:2.8698%;
    padding-top:2.8698%;
    width: 26.8040%;
    display: block;
}

please check the exemple of realy what i want here http://www.aliexpress.com/w/wholesale-jiake-v8.html?g=y&SearchText=jiake%2Bv8&CatId=0&initiative_id=SB_20131218055218

Looks to me like it is working... Am I missing something?

[JorgeM]

Am I missing something?

He was providing an example of what he wants to do. It seems to me he's looking for guidance on how to incorporate that less..more functionaility into the code example that he pasted above.

[Dervish1]

I would think it's a matter of putting some code into the mouseover to modify the contents of the div. This forces a redraw, of course, which might be a bit ugly if you have a large grid that has to be redone.

Alternately, you might try assigning each item a tooltip with the full info you want.

[chrisschristou]

tried by my self but div don't make border the when i hover on first item of list it make some trouble
here is the what i do www.zunaphone.com/accesory
all that list have same class name and id this is the code css

#itemlist {
    clear: none;
    float: left;
    margin-left: 2.8698%;
    margin-bottom:2.8698%;
    padding-top:2.8698%;
    width: 26.8040%;
    display: block;
}
.itemlist:hover {
    border: 2% solid  #CCC;
    }
    .iteminfo{
    overflow-y: hidden;
    height: 50px;
}

please view ebay product list with gallery view and hove mouse on to understund what i mean what i relay want to do : http://www.ebay.com/sch/Cell-Phones-Smartphones-/9355/i.html?rt=nc&_dmd=2

[chrisschristou]

any help here please??

Maybe as a quick example...

http://jsfiddle.net/NgXSc/62/