CODEWITHSUNDEEP
htmltwitter-bootstrapcss
ridwan
ridwan

Reputation: 25

How can i make the picture zoom in with css when my picture is 100% width in a bootstrap column?

How can i make the picture zoom in with CSS when my picture is 100% width in a bootstrap column? With my code below, it seems to transition outside the frame.

.frame {
  width: 100%;
  height: 75%
  overflow: hidden;
}
.zoomin img {
  width: 100%;
  height: 75%
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.zoomin img:hover {
  width: 105%;
}
<div class="col-md-3">
  <div class="zoomin frame">
    <img src="http://lorempixel.com/400/200/abstract/1/" title="" />
  </div>
</div>

Upvotes: 0

Views: 1050

Answers (1)

TOM
TOM

Reputation: 178

You don't need change your image size, you can set transform: scale to zoom them.

.frame {
  width: 100%;
  height: 100%
  overflow: hidden;
}
.zoomin img {
  width: 100%;
  height: 100%
   -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.zoomin img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
<div class="col-md-3">
  <div class="zoomin frame">
    <img src="http://lorempixel.com/400/200/abstract/1/" title="" />
  </div>
</div>

Upvotes: 2

Related Questions