Trying to figure why one image zoom outside of it container - css

Question

I'm trying to have an image zoom. I have it working but ran into a strange situation I can't explain. In trying to cut down the amount of div, etc elements I created two sections below one use a carousel the other just plain div.
In the first section.. The image stay within it boundary and zoom in nicely..Great!!!
In the second section the image expands out side of it boundary..
It seem using the carousel keeps the image in bound.
<div class="w3-container w3-padding-10" >
<div class="w3-row">
<div class="container" style="background-color:black; width:100%; margin:0">
<div class="carousel slide" data-ride="carousel" style="background-color:black; width:100%; margin:0">
<div class="carousel-inner">
<div class="item active">
<img class="imgx" src="w3images/img1.jpg" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section 2 -->
<section style="background-color:red; no-repeat;background-size: cover;">
<div class="w3-container w3-padding-10" >
<div class="w3-row">
<div >
<img class="imgx" src="w3images/img1.jpg" style="width:100%;">
</div>
</div>
</div>
</section>
stylesheets;
<style>
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from
{
-webkit-transform: scale(1,1);
}
to
{
-webkit-transform: scale(1.5,1.5);
}
}
/* Standard syntax */
#keyframes zoom {
from
{
transform: scale(1,1);
}
to
{
transform: scale(1.5,1.5);
}
}
.imgx {
-webkit-animation: zoom 10s;
-webkit-animation-fill-mode: forwards;
animation: zoom 30s;
animation-fill-mode: forwards;
}
</style>
Any ideas

Answer 1

You need to set a fix width to your parent divs when the image zoom it:
.carousel-inner .item{
width:100px;
height:100px;
overflow:hidden;
}
.w3-row>div{
width:100px;
height:100px;
overflow:hidden;
}
.big-container {
width: 500px;
}
.carousel-inner .item{
width:100px;
height:100px;
overflow:hidden;
}
.w3-row>div{
width:100px;
height:100px;
overflow:hidden;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(1, 1);
}
to {
-webkit-transform: scale(2.5, 2.5);
}
}
/* Standard syntax */
#keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(2.5, 2.5);
}
}
.imgx {
-webkit-animation: zoom 10s;
-webkit-animation-fill-mode: forwards;
animation: zoom 30s;
animation-fill-mode: forwards;
}
<div class="big-container">
<div class="w3-container w3-padding-10">
<div class="w3-row">
<div class="container" style="background-color:black; width:100%; margin:0">
<div class="carousel slide" data-ride="carousel" style="background-color:black; width:100%; margin:0">
<div class="carousel-inner">
<div class="item active">
<img class="imgx" src="https://dummyimage.com/100x100/ed5fed/ffffff" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section 2 -->
<section style="background-color:red; no-repeat;background-size: cover;">
<div class="w3-container w3-padding-10">
<div class="w3-row">
<div>
<img class="imgx" src="https://dummyimage.com/100x100/ed5fed/ffffff" style="width:100%;">
</div>
</div>
</div>
</section>
<div>

Answer 2

$(document).ready(function()
{
$("[name='oimg']").mousemove(function(e)
{
$(".image").css({
display:'block',
left: e.pageX + 5,
top: e.pageY + 5
});
var src = $(this).attr("src");
$(".image").attr("src",src);
});
$("[name='oimg']").mouseout(function(e)
{
$(".image").css("display","none");
});
});
.image
{
display:none;
position: absolute;
width: 20%;
height: 50%;
border-style:solid;
border-color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" class="image">
<div>
<img name="oimg" src="https://www.microsoft.com/en-us/CMSImages/WindowsHello_Poster_1920-1600x300-hello.png?version=0d8f51c7-ef87-b0af-8f26-453fb40b4b7d" style="width:100px; background-color:#960;padding:20px;">
<img name="oimg" src="https://static1.squarespace.com/static/528fc8ffe4b070ad8ee97493/t/558c019ae4b08aeb04726a36/1435238813669/Ladybug+Saying+Hello%21" style="width:100px; background-color:#39F; padding:20px;">
</div>
is this what u want ?