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標題懸停在圖像上

回答

相關問題