How do i overlay image on card using css? - html

Question

I want to put small images on bootstrap card. Half image will be outside of the card and half image will be inside of the card.
How can fix this?
Here is my code:-
<div class="row">
<div class="col-md-4">
<div class="img">
<img src="assets/images/images/brush.svg">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Graphic Desiger</h5>
</div>
</div>
</div>
</div>

Answer 1

You can simply have some custom CSS to achieve this. Set your img to position absolute. And some margins to your main div
Demo
img {
margin-top: -50px;
width: 50%;
}
.col-md-4 {
margin-top: 50px;
}
.img {
position: absolute;
margin-left: 10em;
z-index: 999999;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4">
<div class="img">
<img src="https://via.placeholder.com/150">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Graphic Desiger</h5>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img">
<img src="https://via.placeholder.com/150">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Developer</h5>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img">
<img src="https://via.placeholder.com/150">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Front End</h5>
</div>
</div>
</div>
</div>