Recently I was working on project for user and It requires to put text over image for users listing page and here is how I did it.


Final result:


What we need?

<div id="container">
<img src="{{url('/')}}/images/statics/no-chef.jpg" class="img-responsive" alt="">
<span id="text">{{$user->fullname}}</span>

As you can see in sample code above we need a div with id or class and inside that our img input which is our image in html way and another id or class for our text and that's all.


Now it's time to add our CSS codes:

#container {
  position: relative;
#image {
  position: absolute;
  left: 0;
  top: 0;
#text {
  z-index: 100;
  padding: 0 10px;
  position: absolute;
  color: #fff;
  background: rgb(0, 0, 0); /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  font-size: 24px;
  bottom: 10px;


Note: you might have notice that I did not use id="image" in my img input, well you are right and that's only because I user class="img-responsive" which is responsive class of bootstrap for images and that will do the magic for me cool


Did you find this tutorial interesting? share it with your freinds.



Share this article: