Divi主题：投资组合模块：覆盖图中的项目标题显示

-2

我为我的投资组合网站使用了Divi Wordpress主题。Divi主题：投资组合模块：覆盖图中的项目标题显示

我计划使用可过滤的投资组合模块来显示我的工作。我的网站当前状态：http://anti-mogul.com。

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

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

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

通过查看示例站点与我自己的区别 - 示例站点的构建器设法将包含标题的h2移动到其上面的跨度类“et_overlay”。

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

来源

2017-04-17 acekittyhawk

.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>

，你还可以添加变换上悬停效果按您的要求。

来源

2017-04-17 13:34:05

感谢您的建议。你会如何建议实施该解决方案 - 牢记divi主题和模块的性质？ – acekittyhawk

我已经根据您的主题div结构编辑了上面的代码，您不需要更改html，只需更新style.css或自定义css中的代码即可添加上面的悬停效果。 –

谢谢senpai - 这是一切:) :) – acekittyhawk

Divi主题：投资组合模块：覆盖图中的项目标题显示

回答

相关问题