CSS :hover not working in pratice - html

Question

I am working on a personal design project where I have 5 tiles with images in them and when you mouse over any of them they display alternate text. I have included my source code but my problem seems to be when I test this by hovering over the tile I added the W3 snippet to nothing happens. If I inspect the code however and add the hover attribute in the Chrome inspect tool it seems to work just fine. What am I missing here?
Here is my code My Code
.bottom p {
text-align: center;
}
.bottom {
margin-top: 200px;
width: 50%;
}
.top {
width: 33.33333333333%;
display: inline-block;
}
.tile {
height: 200px;
justify-content: center;
align-items: center;
overflow: hidden;
padding-left: 0px;
padding-right: 0px;
border-style: solid;
border-width: 5px;
border-color: /*Navy Blue*/ #333333/* FetchMe Orange #FBAA1E*/;
text-align: center;
box-shadow: 5px 5px 10px #000000;
}
.tile p {
z-index: 4;
font-size: 24px;
position: absolute;
bottom: 0;
margin-bottom: 10px;
font-weight: bold;
text-align: center;
margin-left: 35%;
margin-right: 35%;
}
.img1 {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
.top p {
text-align: center;
}
.fetch-form {
padding-top: 50px;
padding-bottom: 50px;
margin: 0 auto;
position: absolute;
z-index: 3;
margin-left: 110px;
margin-right: 110px;
left: 0;
right: 0;
}
.tiles {
margin-left: 0px;
margin-right: 0px;
z-index: 2;
position: absolute;
top: 150px;
left: 0px;
color: white;
display: inline-block;
padding-top: 10px;
}
.inner {
display: block;
margin-left: auto;
margin-right: auto;
}
.slider {
z-index: -1;
position: absolute;
padding-right: 0;
padding-left: 0;
margin-right: 0;
margin-left: 0;
left: 0;
right: 0;
top: 0;
height: 600px;
min-width: 100%;
}
.item {
height: 600px;
}
.container {
position: relative;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0%;
height: 100%;
transition: .5s ease;
z-index: 5;
}
.container:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.image {
display: block;
width: 100%;
height: auto;
}
<div class="row">
<div class="col-xs-10 fetch-form">
<form action="order" method="POST" role="form" id="address_form">
<div class="col-xs-12 fetch-form">
<div class="row">
<div class="col-xs-8 input">
<div class="input">
<i class="icon-prepend fa fa-home"></i>
<input type="text" placeholder="Street Address (optional)" id="address" name="address" class="form-control input-lg" autocomplete="off">
</div>
</div>
<div class="col-xs-2">
<input type="hidden" name="zip_code"><input type="hidden" value="true" name="set_temp_address">
<button class="btn btn-primary btn-lg btn-block btn" type="submit">
<i class="fa fa-search"></i> Fetch Me Food!
</button>
</div>
</div>
</div>
<div class="row well well-sm" style="display: none;">
<div class="col-xs-4 text-center">
<div class="radio" >
<label><center><i class="fa fa-taxi fa-lg hidden-xs"> </i></center>
<input type="radio" id="type_delivery" name="order_type" value="DELIVERY" checked="checked">
<span class="radiosearch"> </span><span class="ordertype">Delivery</span>
</label>
</div>
</div>
<div class="col-xs-4 text-center border-left">
<div class="radio">
<label>
<center><i class="fa fa-cutlery fa-lg hidden-xs"> </i></center>
<input type="radio" id="type_takeout" name="order_type" value="TAKEOUT">
<span class="radiosearch"> </span>
<span class="ordertype"><nobr>Pick-up</nobr></span>
<nobr></nobr>
</label>
</div>
</div>
<div class="col-xs-4 text-center border-left" >
<div class="radio"><a href="/account/groups" style="color: #333333;">
<label>
<center><i class="fa fa-group fa-lg" style="margin-bottom: 6px;"> </i></center>
<span class="ordertype"><span style="margin-top:9px;" class="visible-xs">Group »</span></span> <span
class="ordertype"><span class="hidden-xs">Group Order »</span></span> </label></a></div>
</div>
</div>
</form>
</div>
<div class="col-xs-12 tiles">
<div class="inner">
<div class="col-xs-3 top tile container">
<p>Restarunts and Catering</p>
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" class="img1 image" alt="">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
<div class="col-xs-3 top tile">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" class="img1" alt="">
<p>Our Deals</p>
</div>
<div class="col-xs-3 top tile">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" class="img1" alt="">
<p>Grocery Shopping</p>
</div>
</div>
</div>
<br>
<div class="col-xs-12 tiles">
<div class="inner">
<div class="col-xs-6 bottom tile">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" alt="" class="img1" >
<p>Tailgates</p>
</div>
<div class="col-xs-6 bottom tile">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" alt="" class="img1">
<p>Order Anything</p>
</div>
</div>
</div>
<div class="slider col-xs-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide one -->
<div class="item active">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/download.jpg" alt="">
</div>
<!-- Slide two -->
<div class="item">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/download.jpg" alt="">
</div>
<!--Slide three -->
<div class="item">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/download+(2).jpg" alt="">
</div>
<!--Slide four -->
<div class="item">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/download+(2).jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

Answer 1

This is an issue with other tiles overlapping the containers (z-index issue). You can try something like this:
.tiles {
pointer-events: none;
}
.container {
pointer-events: auto;
}

Answer 2

It is because you have used .tiles class for both .col-xs-12 items which are supposed to be 2 rows of pictures.
.tiles class has top, left properties defined and are position property as absolute. Since both rows of pictures have same top and left positions from .tiles, the second one overlaps the first.
This is why hover will never happen for .container normally. hover is always happening for the second row which is on top even though 1st row is visible below.