ディビテーマ：ポートフォリオモジュール：オーバーレイ

Question

におけるプロジェクトのタイトル表示、私は私のポートフォリオサイトにディビWordpressのテーマを使用しています。

私は自分の仕事を表示するには、濾過可能ポートフォリオモジュールを使用する予定。私のウェブサイトの現在の状態：http://anti-mogul.com。私は（下記）は、この例を見て

、私は本当にホバリングサムネイルの上、各プロジェクトの表示の方法タイトルが好き。この機能を私のサイトのポートフォリオセクションに追加したいと思います。

例：
http://doers.sg/work/

私は、CSSのオーバーライドを介して他の多くの機能を変更することができました - が、これは構造的なものより多くのことのようです。サンプルサイトと自分との違いを見てから

- サンプルサイトのビルダーは、それ以上のスパンクラス「et_overlay」にタイトルを含むH2を動かすことに成功しました。

誰もがこのためのソリューションを提案することができれば、それははるかに高く評価されるだろう。

Answer 1

.et_pb_portfolio_item{ 
 
    position: relative; 
 
} 
 
.et_pb_portfolio_item h2{ 
 
    position: absolute; 
 
    top:5%; 
 
    left:2%; 
 
    display:none; 
 
     transform: translate3d(0px, 0px, 0px); 
 
     transition: all 0.3s ease 0s; 
 
    } 
 
.et_pb_portfolio_item:hover h2{display:block;}

<div id="post-546" class="et_pb_portfolio_item et_pb_grid_item project_category_web post-546 project type-project status-publish has-post-thumbnail hentry project_category-web first_in_row" style="display: block;"> 
 
\t \t \t \t \t \t \t \t \t \t <a href="http://anti-mogul.com/project/project_8/"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <span class="et_portfolio_image"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <img src="http://anti-mogul.com/wp-content/uploads/2017/02/gallery-5.jpg" alt="Project_8" height="284" width="400"> \t \t \t \t \t \t <span class="et_overlay"></span> \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </a> 
 
\t \t \t \t 
 
\t \t \t \t \t \t \t \t \t <h2><a href="http://anti-mogul.com/project/project_8/">Project_8</a></h2> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t </div>

また、あなたの要件ごとにホバーへの影響を変換追加することができます。