SquareSpace客户CSS标题悬停在图像上

我正在使用SquareSpace，并且正在尝试将自定义CSS添加到封面上的3张图像。目前悬停的图像会改变不透明度，然后出现一个蓝色块并显示图像的标题。我正在尝试使蓝色块变大，但也要确保块已修剪到实际图像。正如你可以在下面的图片中看到，有一点悬：SquareSpace客户CSS标题悬停在图像上

任何帮助，将不胜感激！

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { 
    display: block; 
    position: relative; 
    top: -15px; 
    text-align: center; 
    opacity: 0; 
    background-color: #1E75BB; 
    margin-bottom: 0px; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

.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 .image-slide-title { 
    font-family: adelle-sans; 
    font-size: 16px; 
    color: #fff; 
    text-transform: uppercase; 
} 

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

@media only screen and (max-width: 75px) { 
    .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { 
    opacity: 50; 
    } 
}

来源

2017-03-01 Avery

看来你的形象有问题，你可以解决它，所以我们可以帮你吗？ –

你正在寻找的目标是'.sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper'。从那里你可以风格它，但你想:) –

东西是每个图像有不同的尺寸和共同的类（div.image-slide-title）。

有2种方法我能想到的，或者（宽说248px作为最后一个）Photoshop的所有图像，以相同的尺寸，并与上面一样影响div.image-slide-title，只是这一次248px宽度应为所有这些工作。

或者，隔离每个图像与一个新的类/ ID（例如：div.image-slide-title-1，div.image-slide-title-2 & div.image-slide-title-3）并给它除了适当的宽度以下：

margin: 0 auto;居中。
给图像的width蓝色块（例如：最后一个应该是width: 248px;）

来源

2017-03-01 21:11:24 Syden

神奇的工作....我去了选项1！我很欣赏深入的解释，这是超级有用的。 – Avery

苏菲很高兴它的工作，请考虑标记正确的答案，如果它帮助你，谢谢。问候。 – Syden

SquareSpace客户CSS标题悬停在图像上

回答

相关问题