如何更改Twenty Twenty插件中的標籤之前和之後？

Question

如果您不熟悉TwentyTwenty插件，它是一種視覺差異工具，可讓您突出顯示兩幅圖像之間的差異。

我在wordpress上使用他們的插件，因爲我需要在兩個圖像之間滑動的功能。但是，當您將鼠標懸停在圖片上時，默認情況下會前後顯示。

Before and after labels

基本上就是我想要做的是之前和之後的標籤來改變，使他們能說點別的。如何去做這件事？

Answer 1

您可以通過在文件twentytwenty.css修改以下行更改這些參數：

.twentytwenty-before-label { 
    opacity: 0; } 
    .twentytwenty-before-label:before { 
    content: "**Before**"; } 

.twentytwenty-after-label { 
    opacity: 0; } 
    .twentytwenty-after-label:before { 
    content: "**After**"; } 

CSS的這部分從線102

Answer 2

似乎保持twentytwenty.css，改變你的HTML，每個DIV容器提供一個唯一的ID：

<div id="set_1" class="twentytwenty-container">  
    <img src="img/1_1.jpg" /> 
    <img src="img/1_2.jpg" /> 
</div> 

...提供的css爲SET_1提供了獨特的文本：

#set_1 .twentytwenty-before-label:before { 
    content: "new before" } 
#set_1 .twentytwenty-after-label:before { 
    content: "new after" } 

這使你保持之前的原始和後文本，在需要的時候，提供當你實現一個以上的圖像比較獨特的標籤。