How to prevent an image from scaling outside parent's borders? - css

Question

I have list of different services provided, each service has an image, heading, and description. I've set it up so that image scales to 1.3x size on mouse hover. The scaling works, but it ignores the parent's borders when doing so.
I've captured a GIF of what it looks like in action.
Here is the code I'm working with.
.cleaningservices {
max-width: 250px;
max-height: 250px;
}
/* Default state of the image */
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
/* Scale the image to 1.3 it's size on mouse hover */
.hover01:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="cleaningservices">
<div class="col-sm-6 col-md-4">
<div class="thumbnail hover01">
<img src="https://bosworthco.com/wp-content/uploads/2016/10/cleaning-268134_960_720.jpg" alt="deep house cleaning">
<div class="caption">
<h3>Deep Cleaning</h3>
<p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p>
</div>
</div>
</div>
</div>
</div>
What changes do I have to make to make the images scale inside the parent's borders on mouse hover?

Answer 1

you could add the image to a div and give the div overflow:hidden;
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
width:100%;
}
.hover01:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.img-parent{
overflow:hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="cleaningservices">
<div class="col-sm-6 col-md-4">
<div class="thumbnail hover01">
<div class="img-parent">
<img src="http://fiusms.fiu.edu/wp-content/uploads/Residential-Cleaning-Watauga-TX.jpg" alt="deep house cleaning">
</div>
<div class="caption">
<h3>Deep Cleaning</h3>
<p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p>
</div>
</div>
</div>
</div>
</div>

Answer 2

just use overflow: hidden;
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
overflow: hidden;
}

Answer 3

Create an img container on which you set overflow: hidden;. I added a background-color on body so you see it works.
body {
background-color: #f0f0f0 !important;
padding: 50px;
}
.noverflow {
overflow: hidden;
}
.thumbnail {
background-color: #fff;
}
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="cleaningservices">
<div class="col-sm-6 col-md-4">
<div class="thumbnail hover01">
<div class="noverflow"><img src="http://fiusms.fiu.edu/wp-content/uploads/Residential-Cleaning-Watauga-TX.jpg" alt="deep house cleaning"></div>
<div class="caption">
<h3>Deep Cleaning</h3>
<p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p>
</div>
</div>
</div>
</div>
</div>