タイトルと説明付きの画像がほとんどありません。画像の後ろにタイトルと説明を入れたいのですが、ホバーすると画像が消えてタイトルと説明が表示されます。
私はすでにいくつかのことをしましたが、続けることはできません。
htmlコードは次のとおりです。
<div class="views-field-field-contest-image">
<a href=""> <img>....</img> </a>
</div>
<div class="views-field-title">
<p>("title")</p>
</div>
<div class="views-field-field-description">
<p>("description")</p>
</div>
cssコードは次のとおりです。
.views-field-field-contest-image {
border: 1px solid #ddd;
display: block;
height: 250px;
overflow: hidden;
width: 250px;
}
.views-field-field-contest-image:hover img {
display: none;
}
.views-field-title {
display:none;
}
.views-field-field-description {
display:none;
}
.views-field-title:hover {
display: block;
text-align: center;
margin: 20% 0 0;
}
問題は、タイトルと説明が画像の下ではなく「隠れて」いて、ホバー時に表示できないことです