html - 带有文本的图像的悬停效果

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

如果我没理解错的话，您希望能够在图片顶部发布链接(链接可以是 a-href、h1、h2、span 等)。为此，请执行以下操作: 1.写一个容器div。例如:

<div>
text
</div>

1. 将其样式 (CSS) 设置为您想要的背景图片。确保 div 的大小适合图片大小。然后，在 div 中，您可以简单地写下您想要的标签(文本)。例如:

   <跨度> 文本

现在事情变得有趣了。为了将文本定位在 div 中？ => 将 div 的位置设置为相对位置 (position:relative;) 并将跨度位置设置为绝对位置。然后调整绝对位置的顶部/左侧/底部/右侧，文本就会出现在您想要的任何位置。