Question

我一整天都试图获取图片叠加来保留网址链接。

我有一系列圆形图像是图片库的一部分，我添加了一个叠加层并将文本放在我想要的位置，但现在叠加层正在移除图像的URL链接。

我正在使用方形空间模板，因此我无法移动任何块，因为它们由CMS呈现。

文本在这里：“。image-slide-title”图像在这里：“。second-image .loaded”，链接包含以下类：“image-slide-anchor .content-fit”< / p>

这是我正在使用的链接：https://cesare-asaro.squarespace.com/work

这是我到目前为止针对这个特定部分的代码：

＆＃13;

#portfolio  {
     	background-repeat: repeat;
    	background-color: rgba(239,93,85,1); 
      .margin-wrapper:hover { //for porfolio hovers
        position: relative;
      }  
       .margin-wrapper:hover a:after {
    	opacity:.8;
       }
     .margin-wrapper a:after {
        border-radius: 50%;
        content: '\A';
        position: absolute;
        width: 100%; height:100%;
        top:0; left:0;
        background:rgba(255,255,255,0.8);
    	opacity: 0;
        transform: scale(1.002)
        margin: 0 -50% 0 0;
        transition: all .7s;
        -webkit-transition: all .7s; 
      }
      .sqs-gallery-container{
      	overflow: visible;
      }
     .margin-wrapper:hover .image-slide-title{
        opacity:1;
        color: rgba(239,93,85,1);
        -webkit-transition: all .7s;
      }
      .image-slide-title{  
      	font-size: 50px;
        text-transform: uppercase;
        line-height: 100%;
      	opacity:0;
      	position: absolute;
      	margin: -100%  0;
        height:100%;
        width: 100;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
      }
    }

＆＃13;

如果有人可以放弃一些关于这个主题的知识，我会非常感激。我对相似的方法感到很困惑，有些没有JS，有些使用：after和：hover（我只是用代码修改一下）。

提前致谢。

Answer 1

你的叠加可能会阻止点击甚至是它下面的东西，阻止它触发链接。

只需将SELECT fact FROM numfacts WHERE number = '$number' ORDER BY RAND() LIMIT 1添加到叠加层即可。这将使它不捕获点击，允许它落到它下面的元素。

CSS - 带链接和文本的图像叠加

1 个答案: