My overlay is affecting the whole card instead of just the image - html

Question

I'm setting up several Bootstrap media objects and I want for a FontAwesome icon to show up on the image as an overlay when the mouse hovers, once clicked this opens a fancybox.
I've tried moving things around quite a bit, but at this putting I think I'm having tunnel vision. Please help!
My code snippet:
/**The CSS I've been trying to use: **/
.overlay-hover:hover .image {
opacity: 0.85;
transition: 1s ease;
}
.overlay-hover:hover .overlay {
opacity: 1;
}
.overlay {
transition: 1s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
<div class="card bg-light mb-3 shadow">
<div class="card-body">
<div class="media">
<img src="https://via.placeholder.com/150x300"style="height:125px;width: auto" class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Title</h5>
<p>Text</p>
<span class="badge badge-primary">One</span>
</div>
</div>
</div>
</div>
Not being able to achieve the results I want, so hopefully someone will be able to easily tell what I'm doing wrong.

Answer 1

This is what you were looking for?
*,
*:before,
*:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
padding: 1em 0;
float: left;
width: 50%;
}
#media screen and (max-width: 640px) {
.container {
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px) {
.container {
width: 33.33333%;
}
}
.container .title {
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.content {
position: relative;
width: 90%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
.content .content-overlay {
background: rgba(0, 0, 0, 0.7);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.content:hover .content-overlay {
opacity: 1;
}
.content-image {
width: 100%;
}
.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}
.fadeIn-bottom {
top: 90%;
}
.media-body {
position: relative;
left: 50%;
top: 50%;
transform: translate;
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
.card-body {
padding: 0!important;
}
.card-body {
background-color: red!important;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row ">
<div class="col-sm-6 card bg-light shadow ">
<h4 class="text-center">Card 1</h4>
<div class=" card-body">
<div class="container">
<div class="row">
<div class="col-9">
<div class="content">
<a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
<div class="content-details fadeIn-bottom">
<i class="fab fa-html5"></i>
</div>
</a>
</div>
</div>
<div class="col-3">
<div class="media-body">
<h5 class="mt-0">Title</h5>
<p>Text</p>
<span class="badge badge-primary">One</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 card bg-light shadow ">
<h4 class="text-center">Card 2</h4>
<div class=" card-body">
<div class="container">
<div class="row">
<div class="col-9">
<div class="content">
<a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
<div class="content-details fadeIn-bottom">
<i class="fab fa-html5"></i>
</div>
</a>
</div>
</div>
<div class="col-3">
<div class="media-body">
<h5 class="mt-0">Title</h5>
<p>Text</p>
<span class="badge badge-primary">One</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>