【问题标题】: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 以添加上面的悬停效果。
    • 谢谢前辈 - 一切都搞定了 :)
    • 欢迎您! :) 如果对您有帮助,请您也点赞。
    猜你喜欢
    • 1970-01-01
    • 2015-05-19
    • 1970-01-01
    • 2015-11-29
    • 2023-02-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多