Hover effect on image with text

Question

I don't know how to make text in the photo, and make a link in the whole photo. I've made a darkening effect which I don't want to change, I just want to add text to it. I really want to keep the current dimensions and, above all, responsiveness.

There is link to codepen: 'https://codepen.io/pawe-dejda/pen/XyPzpK'

body, html {
    height: 100%;
}

	.caption {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	text-align: center;
	color: #000;
}
	.responsive {
    width: 100%;
    max-width: 88px;
    height: auto;
	position: center;
}
.tz-gallery .row > div {
    padding: 2px;
	margin-bottom: 4px;
}

.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

@media(max-width: 768px) {
    body {
        padding: 0;
    }
}

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.fade:hover {
	opacity: 0.5;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dejda.e-kei.pl/nuar/css/style.css">

<div class="w3-container w3-padding-64 w3-black">
	<div class="w3-content">
	    <div class="tz-gallery">

        <div class="row no-gutters">
			
			            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
					<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
				</a>
			</div>
 
			            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
					<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
				</a>
			</div>
				
			
			            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
					<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">		
				</a>
              </div>
              </div>
              </div>
              </div>
			  </div>

Answer 1

If i understand correctly, you want to be able to post links (link can be a-href, h1, h2, span etc') on top of your picture. To do so, do the following: 1. write a container div. for example:

<div>
text
</div>

2. set its style (CSS) to the background picture you want. Make sure the div's sizes fit the picture size. Then, inside the div you can simply write down the tag you wish (text). for example:

   < span > text < /span >

Now things get interesting. In order to position the text inside the div? => set the div's position to relative (position:relative;) and set the span position to absolute. then play around with the top / left / bottom / right of the absoloute position, and text would appear whereever you want it to.