css - テキスト付きの画像ホバリング効果

Question

タイトルと説明付きの画像がほとんどありません。画像の後ろにタイトルと説明を入れたいのですが、ホバーすると画像が消えてタイトルと説明が表示されます。

私はすでにいくつかのことをしましたが、続けることはできません。

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;
}

問題は、タイトルと説明が画像の下ではなく「隠れて」いて、ホバー時に表示できないことです