Эффект наведения на изображение с текстом

Question

Я не знаю, как сделать текст на фотографии и сделать ссылку на всю фотографию.Я сделал эффект затемнения, который я не хочу менять, я просто хочу добавить к нему текст.Я действительно хочу сохранить текущие размеры и, прежде всего, отзывчивость.

Есть ссылка на кодовый блок: '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

Вот обновленная кодовая ручка

https://codepen.io/kelvinsusername/pen/YROYZM

Он добавляет контейнер с некоторым текстом в нем, но делает его непрозрачным, затем при наведении курсора вместо того, чтобы сделать его менее видимым (например, изображение)это делает его более заметным.

.fade:hover .description {
   opacity: 1;
}

.description {
   position: absolute;
   z-index: 100;
   opacity: 0;
   color: #fff;
   font-size: 20px;
}

Answer 2

.tz-gallery .row>div {
            padding: 2px;
            margin-bottom: 4px;
        }

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

        .img-text-box {

            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.479);
            color: #ffffff;
            width: 100%;
            padding: 20px;
            font-family: Arial;
            font-size: 17px;
        }

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

        .fade:hover {
            opacity: 0.5;
        }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
<div class="tz-gallery">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>Be brave js is cool</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>Readability counts.</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>If the implementation is hard to explain, it's a bad idea.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

Answer 3

Если я правильно понимаю, вы хотите иметь возможность размещать ссылки (ссылка может быть a-href, h1, h2, span и т. Д.) Поверх вашей фотографии.Для этого сделайте следующее: 1. напишите контейнер div.например:

<div>
text
</div>

установите его стиль (CSS) на желаемое фоновое изображение.Убедитесь, что размеры div соответствуют размеру картинки.Затем внутри div вы можете просто записать желаемый тег (текст).например:

text

Теперь все становится интересным.Чтобы разместить текст внутри div?=> установите положение div в относительное (position: относительный;) и установите абсолютное положение диапазона.затем поиграйте с верхним / левым / нижним / правым от абсолютной позиции, и текст появится там, где вы хотите.