したがって、リスト項目内に 2 つの画像が必要な画像ロールオーバー効果があります。次に、それらは CSS 内で互いにオーバーレイされ、ホバー状態で遷移します。
各画像の下に必要なテキストがいくつかありますが、画像の1つが画像のposition:absolute後ろにぶら下がっているだけなので:
段落タグ内でテキストをラップしようとしましたが、何らかの理由で Wordpress がエディター内でそれらを削除しています (原因は 内にあると推測していますli)。私もいくつか実装しようとしましline-heightたが、それもうまくいきません。
HTML マークアップのサンプルを次に示します。
<li>
<img class="alignnone size-full wp-image-153" alt="lucas2" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas2.png" width="117" height="117" />
<img class="alignnone size-full wp-image-154 top" alt="lucas1" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas1.png" width="117" height="117" />
The Dungeon Master
</li>
CSS は次のとおりです。
.crew ul li {
display: inline-block;
list-style: none;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 75px;
font-size: 1.1em;
font-style: italic;
color: #71767d;
font-weight: 300;
position: relative;
width: 117px;
height: 117px;
vertical-align: bottom;
}
.crew ul li img {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
left: 0;
}
.crew ul li img.top:hover {
opacity: 0;
cursor: pointer;
}
全体として、テキスト エディター内で HTML を編集しなくても、他のユーザーがエディターに移動して画像を挿入し、テキストを追加できるように、できるだけシンプルにしようとしています。ありがとう！