ホバー上とテキスト中のテキストの不透明度をCSSで変更します

Question

私は最初に隠されたテキストを含んでいます（例 "hello"は最初は隠されています）。

テキストの上にカーソルを置くと表示されます。

また、「遷移」を使用して、ある場所から別の場所に画像を移動しています。

イメージがある場所から別の場所に移動しても、テキストのホバー効果は変わらないはずです。

以下の例のように、「hello」というテキストを上記のようにしたいとします。

<div id="image-3"> 
    <img src="sample.jpg" height="110" width="110"> 
    <div> 
     <p>Sample</p> 
    </div> 
    <div id="hello-text-right"> 
     <span>Hello</span> 
    </div> 
</div> 

私はこのようなCSSを持っています。しかし、この場合、テキストは最終位置まで画像よりも速く移動します。

#image-3 #hello-text-right{ 
    opacity:0; 
} 

#image-3:hover #hello-text-right:hover{ 
    opacity:1; 
    transition: all 0s linear 0s; 
} 

これについてのご意見はありがとうございます。

Answer 1

CSSでは、色を定義するいくつかの方法があります。今、私の例では黒のテキストである

#hello-text-right{ 
    color:rgba(0,0,0,0); 
} 
#hello-text-right:hover{ 
    color:rgba(0,0,0,1); 
} 

を、しかし、あなたは、あなたがしたい任意のRGBA値を使用することができます。そのうちの一つは、アルファチャンネルを含む色成分を使用しています。

画像要素内にテキストを設定したいことがあります。これを行うには、私はあなたがそれを背景画像を使用してDIVにし、このDIV内にテキストを配置することをお勧めします。その後、イメージのトランジションのみが必要となり、テキストは相対的な位置に配置されます。