CODEWITHSUNDEEP
htmlcssimageresize
User MEOW
User MEOW

Reputation: 1

changing the size of an img and expanding when hover in html

I want to increase the size of an image so that it is the same size as other images. I also want it to expand as it is hovered over, without changing the size.

heres what my code looks like:

.samples {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
}

.samples-col {
  flex-basis: 32%;
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.samples-col img {
  width: 100%;
}
<div class="samples-col">
  <img src="images/sample-1.png">
  <div class="layer">
    <h3>lovely </h3>
  </div>
</div>
<div class="samples-col">
  <img src="images/sample-2.png">
  <div class="layer">
    <h3>pretty </h3>
  </div>
</div>
<div class="samples-col">
  <img src="images/sample-3.png">
  <div class="layer">
    <h3>amazing </h3>
  </div>
</div>

what should i add ?

Upvotes: 0

Views: 1729

Answers (1)

Montassar Souifi
Montassar Souifi

Reputation: 17

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

Related Questions