CODEWITHSUNDEEP
htmlcss
Loren Meehan
Loren Meehan

Reputation: 43

make images expand on hover from center and make image still stay in box

I am trying to make my images act like this: http://www.kas.tw/ (hover over images beneath the image carousel) but my images expand from the side and I can't figure out how to make the image still stay in its box, here is the code.

CSS

#image3{
top: 130%;
left: 20%;
display: none;
}
#cover1{
width: 5%;
height: 100%;
left: 47%;
background-color: green;
z-index: 2;
top: 94%;
position: absolute;
}
.zoom {
    padding: 50px;

    transition: transform .2s; /* Animation */

    margin: 0 auto;
}
.zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, 
it will go outside of the viewport) */
}

HTML

<DIV class='zoom' id='image1'><IMG width='50%' height='90%' src="slime3.JPG"></DIV>
        <DIV  id='image2'><IMG width='50%' height='90%' src="slime4.JPG"></DIV>
        <DIV  id='image3'><IMG width='50%' height='90%' src="slime5.JPG"></DIV>
        <DIV  id='image4'><IMG width='50%' height='90%' src="slime6.JPG"></DIV>
        <DIV  id='image5'><IMG width='50%' height='90%' src="slime7.JPG"></DIV>
        <DIV  id='image6'><IMG width='50%' height='90%' src="slime8.JPG"></DIV>
        <DIV id='cover1'><DIV>
            <DIV id='cover2'><DIV>
                <DIV id='cover3'><DIV>
                    <DIV id='cover4'><DIV>
                        <DIV id='cover5'><DIV>

Upvotes: 3

Views: 2452

Answers (2)

Gosi
Gosi

Reputation: 2003

You can make images stay in the box without expanding its container size.

This can be done purely on CSS by using max-width,max-height to set a specific box size and to use overflow: hidden to hide the excess image when it expands past the width and height.

transform: scale(2,2) allows the image to zoom from the center.

Try this:

#holder {
  max-width: 200px;
  max-height: 200px;
  overflow: hidden;

}

#holder img {
  width: 100%;
   -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#holder img:hover {
  transform: scale(2,2);
}
<div id="holder">
  <img src="https://picsum.photos/200/200">
</div>

Upvotes: 2

akshay kishore
akshay kishore

Reputation: 1027

You could try this 

<div class="item">
<img>..</img>
</div>

and for css 

 .item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Upvotes: 1

Related Questions