画像の上のテキストをスライドショーでホバーに表示

Question

タイトルと同じように、私はスライドショーを持っていて、画像のいずれかにカーソルを置くとテキストが「売り切れ」になります。私が今まで見つけた解決策では、画像の周りにラップを使用するべきだと言いますが、<div>タグを使用してスライドショーでイメージをラップすると、スライダは機能しなくなります。いったんイメージにカーソルを置くと、2つの効果が必要になります。「SOLD OUT」と書かれたソリッドテキストとともに、不透明度の低いオーバーレイする白い背景を作ります。私はCSSの "コンテンツ"の自由を使用していますが、私はそれを考え出すことはできません。

.slide-container { 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
    position: relative; 
 
} 
 
#id1:hover{ 
 
    background: white; 
 
    opacity: .3; 
 
    text-align: center; 
 
    color: black; 
 
    font-size: 30px; 
 
    z-index: 10000; 
 
    font-weight: bolder; 
 
    content: "SOLD OUT"; 
 
}

   <div class="slide-container"> 
 
        <img src="http://placehold.it/350" id="id1"/> 
 
        <img src="http://placehold.it/350" /> 
 
        <img src="http://placehold.it/350" /> 
 
        <img src="http://placehold.it/350" /> 
 
        <img src="http://placehold.it/350" /> 
 
       </div>

Answer 1

あなたは画像にカスタム属性を追加し、JavaScriptを使用してホバー上に表示することができます。

$(".hover-container").hide(); 
 
    
 
$('.slide-container img').hover(function() { 
 
    $(".hover-container").show(); 
 
    $(".hover-container").text($(this).data('text') || ''); 
 
},function() { 
 
    $(".hover-container").hide(); 
 
});

.slide-container { 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
    position: relative; 
 
} 
 

 
.hover-container { 
 
    position: absolute; 
 
    bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="slide-container"> 
 
    <img src="http://placehold.it/350" data-text="SOLD OUT 1"/> 
 
    <img src="http://placehold.it/350"/> 
 
    <img src="http://placehold.it/350" data-text="SOLD OUT 2"/> 
 
    <img src="http://placehold.it/350" /> 
 
    <img src="http://placehold.it/350" data-text="SOLD OUT 3"/> 
 
    <div class="hover-container"></div> 
 
</div>

`content`プロパティは`でのみ使用することができます