CODEWITHSUNDEEP
csscss-float
yarek
yarek

Reputation: 12054

css hover : aligning on bottom: how to align on top?

Before

on rollover

and here is the css:

.divPhoto {
    border:1px solid #999;
    width:140px;
    height:140px;
    border-radius:3px;
    background-color:#EEE;
    display:inline-block;
    margin:10px;
    transition:0.5s;
    overflow:hidden;
}
.divPhoto:hover {
    border:1px solid #0000FF;
    background-color:#CCC;
    cursor:pointer;
    height:175px;
}



foreach($photos as $photo) { ?>

    <div class="divPhoto" >
        <a class="fancybox" data-fancybox-group="gallery" href="upload/<?=$photo->filename?>"><img class="img-polaroid" src="upload/thumb/<?=$photo->filename?>"></a>
        <input type="button" class="btn btnEffacer" value="effacer" style="margin-left:30px;" data="<?=$photo->id?>" />
    </div> 


<? } ?>

ANy idea on align the hover on bottom and not on top ? Because now all pictures are moving when hovering an imahe

Upvotes: 0

Views: 1428

Answers (4)

bfavaretto
bfavaretto

Reputation: 71939

Since the elements are inline-blocks, you can simply use vertical-align: top:

.divPhoto {
    border:1px solid #999;
    width:140px;
    height:140px;
    border-radius:3px;
    background-color:#EEE;
    display:inline-block;
    margin:10px;
    transition:0.5s;
    overflow:hidden;
    vertical-align: top;
}

http://jsfiddle.net/Dtejn/

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196207

A vertical-align:top to the .divPhoto rule should be enough.

Upvotes: 1

mehdi
mehdi

Reputation: 1755

you should use display:inline-table; for .divPhoto div

Fiddle

.divPhoto {
    border:1px solid #999;
    width:140px;
    height:140px;
    border-radius:3px;
    background-color:#EEE;
    display:inline-table;  /* <= this line */
    margin:10px;
    transition:0.5s;
    overflow:hidden;
}

Upvotes: 0

andi
andi

Reputation: 6522

Since you change the height on hover from 140px to 175px, you need some extra margin-bottom on the unhovered state to pad it out to 175px height.

Upvotes: 0

Related Questions