Question

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

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

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

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

通过查看示例站点和我自己之间的差异 - 示例站点的构建器已设法将包含标题的h2移动到span类＆＃34; et_overlay＆＃34;它上面。

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

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;">
										<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主题：投资组合模块：项目标题显示在叠加层中

1 个答案: