css - ユーザーがTumblrで別のDivにカーソルを合わせたときに1つのDivを表示する方法は?

Question

私は HTML/CSS に不慣れで、基本についての教育が必要です。私が求めていることを行う方法を調査しましたが、インターネット上の回答はどれも私のプロジェクトでは機能しません。これがTumblrで作業しているためかどうかはわかりません。

基本的にはこのコードです。#notesboxマウスが上に乗ったときにフェードインしたい#post。これは、2 つの Div に使用される CSS です。

    #post{
    position: relative;
    width:250px;
    height: 250px;
    overflow:hidden;
    float:left;
    font-family: "helvetica";
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    }

と

#notesbox {
    color: white;
    position: absolute;
    text-align: center;
    float: center;
    width: 100%;
    height:20px;
    background-color: black;
    opacity: 0;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
    }

助けてくれてありがとう、そして私の無知でごめんなさい。

編集: これがその HTML です。

<center>
<div id = "postholder">
{block:Posts}
<div id="cent">
</div>
<div id="post">

{block:Title}{Title}{/block:Title}

{block:Text}{Body}{/block:Text}

{block:Photo}

<div id = "photo">
<div id = "notesbox">
<div id = "notes">
REBLOGGED FROM
<div id = "reblogged">
{block:RebloggedFrom} {ReblogParentName} {/block:RebloggedFrom}
</div>
</div>
</div>
<a href="{permalink}"><img class = "default" img src="{PhotoURL-500}" width="250"/></a>
</div>
{/block:Photo}

{/block:Post} はコードの後半にあります。