悬停瓷砖 SquareSpace 自定义 CSS答案

【问题标题】：Hover Tiles SquareSpace Custom CSS悬停瓷砖 SquareSpace 自定义 CSS
【发布时间】：2017-05-01 14:19:19
【问题描述】：

我对 CSS 很陌生，我正在尝试为我的 squarespace 网站编写一些自定义代码。下面是我当前的 CSS，我的网站是 http://www.sophieamberkar.com/。我正在尝试在登陆页面上现有的 4 个图像图块上创建悬停图块。目前我只是得到底部弹出的小矩形。 see image with blue rectangle 我想要的是让蓝色矩形在悬停时覆盖整个图像，并显示当前显示在小蓝色矩形中的文本。

我已经尝试增加高度和行高，但它会在实际图像下方而不是在图像顶部增加它。任何帮助都会很棒！

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 display:block;
 height: 70px;
 line-height: 70px;
 position: relative;
 top: -15px;
 text-align: center;
 font-size: 16px;
 opacity: 0;
 background-color: #1E75BB;
 margin-bottom: 0px; 
 }
 .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 display: block;
 opacity: 50; 
 background-color: none;
 text-align: center;
 width: 100%;
 }

  .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 font-family: adelle-sans;
 font-size: 25px;
 color: #fff;
 }

【问题讨论】：

我想要发生的事情类似于这个网站jasper-demo.squarespace.com
如果蓝色 div 覆盖了整个图像，则该图像将无法点击，因为它不是链接

标签： css tile least-squares

【解决方案1】：

请将您的代码替换为特定选择器的以下代码：

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title{
display:inline-block;
height:188px;
position:absolute;
top:0;
margin-bottom:0;
margin-top:0;
}

使用上面的代码，蓝色背景将覆盖整个图像区域，但蓝色框内的文本将出现在框的顶部。更改 HTML 并确保文本位于蓝色框的中心并设置样式。

【讨论】：