Divi 主题：投资组合模块：项目标题以叠加方式显示答案

【问题标题】：Divi Theme: Portfolio Module: Project title display in overlayDivi 主题：投资组合模块：项目标题以叠加方式显示
【发布时间】：2017-09-13 01:24:24
【问题描述】：

我正在为我的投资组合网站使用 Divi Wordpress 主题。

我计划使用可过滤的作品集模块来展示我的作品。我网站的当前状态：http://anti-mogul.com.

我看到了这个示例（如下），我非常喜欢悬停时每个项目的标题如何显示在缩略图上。我想将此功能添加到我网站上的投资组合部分。

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

我已经能够通过 CSS 覆盖更改许多其他功能 - 但这似乎更像是一种结构性的东西。

通过查看示例站点和我自己的站点之间的差异 - 示例站点的构建者已设法将包含标题的 h2 移动到其上方的 span 类“et_overlay”中。

如果有人可以为此提出解决方案，将不胜感激。

【问题讨论】：

标签： css wordpress hover

【解决方案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;">
										<a href="http://anti-mogul.com/project/project_8/">
													<span class="et_portfolio_image">
														<img src="http://anti-mogul.com/wp-content/uploads/2017/02/gallery-5.jpg" alt="Project_8" height="284" width="400">						<span class="et_overlay"></span>							</span>
												</a>
				
									<h2><a href="http://anti-mogul.com/project/project_8/">Project_8</a></h2>
				
				
				</div>

您还可以根据需要在悬停时添加变换效果。

【讨论】：

感谢您的建议。您如何建议实施该解决方案 - 牢记 divi 主题和模块的性质？
我已经根据您的主题 div 结构编辑了上面的代码，您不需要更改 html 只需更新您的 style.css 中的代码或自定义 css 以添加上面的悬停效果。
谢谢前辈 - 一切都搞定了 :)
欢迎您！ :) 如果对您有帮助，请您也点赞。