logo标签列表

带文本的图片悬停效果

htmlcsshover
3
我不知道如何在照片中添加文本，并使整个照片成为链接。我已经制作了一种我不想改变的暗化效果，我只想在其上添加文本。我希望保持当前的尺寸，并且最重要的是要有响应性。
以下是代码笔链接 '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>

3个回答
2

如果我理解正确，您想要在图片上方发布链接（链接可以是a-href，h1，h2，span等）。要实现此目的，请执行以下操作： 1.编写一个容器div。例如：

<div>
text
</div>

  1. 将其样式（CSS）设置为所需的背景图片。确保div的大小适合图片大小。然后，在div中，您可以简单地编写所需的标记（文本）。例如：

    < span > 文本 < /span >

现在事情变得有趣起来了。为了在div内定位文本，将div的位置设置为相对（position:relative;），并将span位置设置为绝对（position:absolute;）。然后，尝试调整绝对位置的top / left / bottom / right属性，文本就会出现在您想要的位置。

1
这是一个更新的 CodePen。

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

它添加了一个带有一些文本的容器，但使其不透明，然后在悬停时，它不会使其变得更不可见（像图片），而是使其更可见。
.fade:hover .description {
   opacity: 1;
}

.description {
   position: absolute;
   z-index: 100;
   opacity: 0;
   color: #fff;
   font-size: 20px;
}
@kelwin 非常感谢！我已经使用了你的帮助，但是我不知道如何确保文本不会变暗，并且我希望它能够居中在图片上 :( 你能帮我吗？ - Pabloks
@pabloks，请看一下同样的codepen，我做了一些更改。我认为其中一个附加的css或js与.fade类有冲突；我没有深入研究，只是将其更改为.fadeMe。我还在描述类上添加了一些样式来居中文本。 - Kelvin
0

.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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接