CODEWITHSUNDEEP
htmlcsshover
Rahiil
Rahiil

Reputation: 110

how to put Image outside of its parent div when hover

I have a scrollable div with some img elements in it. I have added a hover effect of width and height for images. It works fine, but image get stuck in #scroller div. I want that the image get out of scroller div when mouse over it. How can I do that ?

CSS:

#scroller {
    width:100%;
    border:1px solid black;
    white-space:nowrap;
    height:130px;
    display:inline-block;
    overflow-x:scroll;
    overflow-y:hidden;
}
img {
    width:128px;
    height:128px;
}
img:hover {
    width : 192px;
    height:192px;
}

HTML:

<div id="scroller">
    <img/>
    <img/>
    <img/>
    <img/> ...and some more images
</div>

I didn't try anything because I have no idea.

Upvotes: 1

Views: 2573

Answers (4)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

If you are planning to use CSS only, one approach could be to change the position of the image on hover to absolute.

Look at this example: http://jsfiddle.net/Vn8M6/3/

#scroller {
    width:100%;
    height:100%;
    border:1px solid black;
    white-space:nowrap;
    height:130px;
    display:inline-block;
    overflow-x:scroll;
    overflow-y:hidden;
}

img {
    width:128px;
    height:128px;
    transition: ease-in-out 0s;  
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0);
     z-index:1;
    background-color:grey;
}

img:nth-child(2) {
    background-color:yellow;
     z-index:2;
}

img:nth-child(3) {
    background-color:red;
    z-index:3;
}

img:nth-child(4) {
    background-color:blue;
     z-index:4;
}

img:hover {
    width : 192px;
    height:192px;
    position:absolute;
    top:0;    
}

Otherwise you could use javascript to have achieve better results.

Upvotes: 1

Dr M L M J
Dr M L M J

Reputation: 2407

You can Try -

 #scroller:hover {
    overflow-x:scroll;
    overflow-y:visible;
    height:100%;
 }

JSFIDDLE

Upvotes: 0

Matas Vaitkevicius
Matas Vaitkevicius

Reputation: 61479

you need to change CSS to on hover allow image to go outside the bounds of parent.

#scroller:hover {
    overflow-x:scroll;
    overflow-visible;
}

Upvotes: 0

Trickzter
Trickzter

Reputation: 471

This won't work, because u defined:

overflow-x:scroll; overflow-y:hidden;

Delete these or set up your images with style attribute "absolute" and position them with "right, top, left, bottom" for correct placement!

Greetz

Upvotes: 0

Related Questions