jquery - 具有转换内容的图像悬停效果-6ren

jquery - 具有转换内容的图像悬停效果

转载作者：行者123 更新时间：2023-11-28 04:23:10

我正在尝试实现这种效果 https://www.unispace.com/about/our-people在我的 Wordpress 网站上，但是我无法获得标题 -> 详细信息以在悬停时打开图像。它主要在图像的末尾切断。

.team-listing {
  overflow: hidden;
  clear: both;
  margin-left: -0.15625rem;
  margin-right: -0.15625rem;
  margin-top: .3125rem;
}
.team-listing article {
  min-width: 230px;
  max-width: 230px;
  min-height: 300px;
  max-height: 280px;
  position: relative;
  margin-bottom: .3125rem;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  padding-left: .15625rem;
  padding-right: .15625rem;
  z-index: 0;
}
.team-listing article:after {
  content: " ";
  display: block;
  padding-top: 100%;
}
.team-listing article .panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
@media only screen and (min-width: 40em) {
  .team-listing article .panel {
    top: 0;
    left: .15625rem;
    right: .15625rem;
    bottom: 0;
  }
}
.team-listing article.staff-member .panel {
  background: #fafafa;
  position: absolute;
  top: 0;
  left: .15625rem;
  right: .15625rem;
  bottom: 0;
  overflow: visible;
}
.team-listing article.staff-member .content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  height: 5.8125rem;
  width: 100%;
  padding: 1.5625rem 2.1875rem;
  overflow: hidden;
  padding-bottom: 0;
  color: #fff;
  transition: height 0.45s cubic-bezier(0.19, 1, 0.22, 1), padding 0.65s cubic-bezier(0.19, 1, 0.22, 1), width 0.45s cubic-bezier(0.19, 1, 0.22, 1) 0.45s, background 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}
.team-listing article.staff-member .content h4,
.team-listing article.staff-member .content .jobtitle {
  line-height: 1.2;
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-size: 1.6rem;
}
.team-listing article.staff-member .content .jobtitle {
  font-weight: 100;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 40em) {
  .team-listing article.staff-member .content {
    padding: 1.78571vw 2.14286vw;
  }
}
@media only screen and (min-width: 60em) {
  .team-listing article.staff-member .content {
    padding: 1.78571vw 2.14286vw;
  }
}
@media only screen and (min-width: 1400px) {
  .team-listing article.staff-member .content {
    padding: 1.5625rem 2.1875rem;
  }
}
.team-listing article.staff-member .content .details {
  opacity: 0;
  -ms-transform: translateY(40%);
  transform: translateY(40%);
  pointer-events: none;
  margin-top: 1.25rem;
  transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}
.team-listing article.staff-member .content .details p {
  font-size: 1.4rem;
  color: #fff;
  font-weight: 400;
  line-height: 1.25;
}
.team-listing article.staff-member .content {
  left: auto;
  right: 0;
}
.team-listing article.staff-member figure {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
}
.team-listing article.staff-member figure img {
  width: 100%;
  height: auto;
}
.team-listing article.staff-member figure:before {
  background: linear-gradient(190deg, transparent 65%, #001231 110%);
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.team-listing article.staff-member .content {
  height: 5.8125rem;
}
.team-listing article.staff-member {
  cursor: pointer;
}
.team-listing article.staff-member .content .closebtn {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  z-index: 50;
  width: 3.125rem;
  height: 3.125rem;
  z-index: 150;
  cursor: pointer;
  pointer-events: none;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease-out;
}
.team-listing article.staff-member .content .closebtn:after,
.team-listing article.staff-member .content .closebtn:before {
  width: 0;
  height: .1875rem;
  background: #fff;
  display: block;
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.15s ease-out 0.2s, transform 0.2s ease-out;
}
.team-listing article.staff-member .content:after {
  position: absolute;
  top: 100%;
  left: 0;
  content: 'Read more';
  font-size: .9375rem;
  padding: 0 2.1875rem;
  display: block;
  transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (min-width: 40em) {
  .team-listing article.staff-member .content:after {
    padding: 0 2.14286vw;
  }
}
@media only screen and (min-width: 60em) {
  .team-listing article.staff-member .content:after {
    padding: 0 2.14286vw;
  }
}
@media only screen and (min-width: 1400px) {
  .team-listing article.staff-member .content:after {
    padding: 0 2.1875rem;
  }
}
.team-listing article.staff-member:hover .content {
  height: 7.5rem;
}
.team-listing article.staff-member:hover .content,
.team-listing article.staff-member.active .content:before {
  background: rgba(51, 137, 255, 0.8);
}
.team-listing article.staff-member:hover .content:after {
  top: 65%;
  transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1) 50ms;
}
.team-listing article.staff-member.active {
  cursor: default;
}
.team-listing article.staff-member.active .content {
  height: 100%;
  padding: 1.5625rem 2.8125rem 0;
  width: calc(200.3125%);
  overflow: visible;
  transition: height 0.45s cubic-bezier(0.19, 1, 0.22, 1) 0.45s, padding 0.65s cubic-bezier(0.19, 1, 0.22, 1) 0.45s, width 0.45s cubic-bezier(0.19, 1, 0.22, 1), background 0.65s cubic-bezier(0.19, 1, 0.22, 1) 0.65s;
}
@media only screen and (min-width: 40em) {
  .team-listing article.staff-member.active .content {
    padding: 3.21429vw 2.5vw 0;
  }
}
@media only screen and (min-width: 60em) {
  .team-listing article.staff-member.active .content {
    padding: 3.21429vw 2.5vw 0;
  }
}
@media only screen and (min-width: 1400px) {
  .team-listing article.staff-member.active .content {
    padding: 2.8125rem 2.1875rem 0;
  }
}
.team-listing article.staff-member.active .content:after {
  opacity: 0;
}
.team-listing article.staff-member.active .content .details {
  opacity: 1;
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1) 0.45s;
}
@media only screen and (min-width: 40em) {
  .team-listing {
    margin-left: -0.15625rem;
    margin-right: -0.15625rem;
  }
  .team-listing article {
    padding-left: .15625rem;
    padding-right: 0.15625rem;
  }
  .team-listing article {
    width: 33.33333%;
    float: left;
    padding-left: .15625rem;
    padding-right: 0.15625rem;
  }
}
@media only screen and (min-width: 60em) {
  .team-listing {
    margin-left: -0.15625rem;
    margin-right: -0.15625rem;
  }
  .team-listing article {
    padding-left: .15625rem;
    padding-right: 0.15625rem;
  }
}
@media only screen and (min-width: 40em) and (min-width: 40em) {
  .team-listing article {
    padding-left: .15625rem;
    padding-right: 0.15625rem;
  }
}
@media only screen and (min-width: 40em) and (min-width: 60em) {
  .team-listing article {
    padding-left: .15625rem;
    padding-right: 0.15625rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team-listing article {
    width: 22%;
    float: left;
    padding-left: .15625rem;
    padding-right: .15625rem;
    margin: 10px 1%;
  }
}
@media only screen and (min-width: 1200px) and (min-width: 40em) {
  .team-listing article {
    padding-left: .15625rem;
    padding-right: 0.15625rem;
  }
}
@media only screen and (min-width: 1200px) and (min-width: 60em) {
  .team-listing article {
    padding-left: .15625rem;
    padding-right: 0.15625rem;
  }
}

<div class="team-listing">
  <article class="staff-member">

  <div class="panel">

    <figure class="effect">
      <img src="http://www.clker.com/cliparts/A/Y/O/m/o/N/placeholder-hi.png">

      <div class="content">

        <h4>title</h4>
        <p class="jobtitle">Manager</p>
    
        <a href="#" class="readmore">Read more</a>

        <div class="details">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna ex, luctus vitae egestas nec, ullamcorper consequat dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget dictum mi. Vivamus non nibh diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nunc risus, hendrerit in turpis sit amet, blandit euismod enim. Mauris porttitor mattis ullamcorper. Suspendisse potenti. In rhoncus rutrum malesuada.


        </div>
        <div class="closebtn"></div>

      </div>

    </figure>

  </div>

</article>
  
  <article class="staff-member">

  <div class="panel">

    <figure class="effect">
      <img src="http://www.clker.com/cliparts/A/Y/O/m/o/N/placeholder-hi.png">

      <div class="content">

        <h4>title</h4>
        <p class="jobtitle">Manager</p>
    
        <a href="#" class="readmore">Read more</a>

        <div class="details">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna ex, luctus vitae egestas nec, ullamcorper consequat dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget dictum mi. Vivamus non nibh diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nunc risus, hendrerit in turpis sit amet, blandit euismod enim. Mauris porttitor mattis ullamcorper. Suspendisse potenti. In rhoncus rutrum malesuada.


        </div>
        <div class="closebtn"></div>

      </div>

    </figure>

  </div>

</article>
  </div>

最佳答案

article.staff-member {
    cursor: pointer;
}
article.staff-member {
    position: relative;
    margin-bottom: .3125rem;
    width: 40%;
    float: left;
    margin-left: 0;
    margin-right: 0;
    padding-left: .15625rem;
    padding-right: .15625rem;
    z-index: 0;
}

article:after {
    padding-top: 100%;
}

article:after {
    content: " ";
    display: block;
}

article.staff-member[data-stafftype="Regional leaders"] .panel {
    background-color: #43bead;
}

article.staff-member .panel {
    background: #fafafa;
    position: absolute;
    top: 0;
    left: .15625rem;
    right: .15625rem;
    bottom: 0;
    overflow: visible;
}
article .contextual-links-region, .staff-list article .panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}


article.staff-member figure {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
}

article.staff-member figure:before {
    background: linear-gradient(190deg,transparent 65%,#001231 110%);
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

article.staff-member figure img {
    width: 100%;
    height: auto;
}

article.staff-member:hover[data-stafftype="Regional leaders"] .content,article.staff-member:hover[data-stafftype="Regional leaders"] .content:before {
    background-color: rgba(67,190,173,.65);
}

article.staff-member .content .jobtitle,article.staff-member .content h4 {
    line-height: 1.2;
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-size: 1.25rem;
}

article.staff-member .content .jobtitle {
    font-weight: lighter;
    font-size: .9375rem;
}

article.staff-member:hover .content:after {
    top: 65%;
    transition: all .65s cubic-bezier(.19,1,.22,1) 50ms;
}

article.staff-member .content .contact a {
    opacity: 0;
    transition: opacity .65s cubic-bezier(.19,1,.22,1);
}

article.staff-member .content .detail {
    opacity: 0;
    -ms-transform: translateY(40%);
    transform: translateY(40%);
    pointer-events: none;
    margin-top: 1.25rem;
    transition: all .65s cubic-bezier(.19,1,.22,1);
}

article.staff-member .content:after {
    position: absolute;
    top: 100%;
    left: 0;
    content: "Read more";
    font-size: .9375rem;
    padding: 0 2.1875rem;
    display: block;
    transition: all .65s cubic-bezier(.19,1,.22,1);
}

article.staff-member .content .jobtitle, .staff-list article.staff-member .content h4 {
    line-height: 1.2;
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-size: 1.25rem;
}

article.staff-member:hover .content {
    height: 7.5rem;
}
 article.staff-member .content {
    height: 5.8125rem;
}
article.staff-member .content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: 5.8125rem;
    padding: 1.5625rem 2.1875rem;
    overflow: hidden;
    padding-bottom: 0;
    color: #fff;
    transition: height .45s cubic-bezier(.19,1,.22,1),padding .65s cubic-bezier(.19,1,.22,1),width .45s cubic-bezier(.19,1,.22,1) .45s,background .65s cubic-bezier(.19,1,.22,1);
}

article.staff-member .content {
    height: 5.8125rem;
}

figure {
    margin: 1em 2.5rem;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
figure {
    margin: 0!important;
}

    <article class="staff-member" data-id="339" data-stafftype="Regional leaders" data-name="Benji Tiso" data-nid="38" data-region="Europe" style="z-index: 0; display: block;">
		<div class="panel">
			<figure>
				<img src="http://via.placeholder.com/463x463" alt="Photo of Benji Tiso">
			</figure>
			<div class="content">
				<h4>Benji Tiso</h4>
				<span class="jobtitle">Principal, Client Relations</span>
				<section class="detail">
					<p>Heading up our studio in Zurich, Benji enthusiastically leads and motivates a highly qualified team and is responsible for generating, developing and supervising projects. With over 15 years of successful experience in project management and client relations, Benji as Principal for Client Relations, has the ability to quickly identify client needs, both in day to day and complex situations, and provide solutions.</p>
				</section>
				<section class="contact">
					<a class="bio"><span>Read more</span></a>					
					<a class="email"><span>Contact me</span></a>									
				</section>
			<div class="closebtn"></div></div>
		</div>
	</article>

关于jquery - 具有转换内容的图像悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42100073/

文章推荐： jquery - anchor 标记破坏具有哈希更改 URL 的页面

文章推荐： c++ - 使用 gtest 进行 Arduino 单元测试

文章推荐： c++ - 是否可以在 cpp 中创建一组指向对象的指针？

javascript - 淡出 Div 内容 - 空 Div 内容 - 淡入新内容
我正在为我的按钮使用 onClick 功能。我的按钮代码如下所示: Button 1 Button 2 我的 JS 函数如下所示: function fadeNext(selectedId, spee
php - 如何将 MySQL 内容(文本+html 内容)分成列？
首先，我想提一下，我理解每个人在不提供至少一些试验或错误的情况下提出问题的感受，但这纯粹是一种知识需求，话虽如此，我会去提前问。我一直无法弄清楚如何将保存在 MySQL 表中的 600-1000 个
javascript - echo "row 1"内容每个不同位置的,"row 2"内容
我想做的事情有点令人困惑，而且我英语不太好，所以我先把代码贴在这里，这样你就可以很容易地理解: 以下是表单内容: Testing for Stackoverflow Option1
c++ - 使用 SDL_Renderer 绘制 2D 内容，使用 SDL_GLContext 绘制 OpenGL 内容
我学习 SDL 二维编程已有一段时间了，现在我想创建一个结合使用 SDL 和 OpenGL 的程序。我是这样设置的: SDL_Init(SDL_INIT_VIDEO); window = SDL_Cr
javascript - ID相同时如何获取data-*内容？
我创建了 2 个 data-* 标签。数据类别和数据标签。单击 href 标签后，我想复制该数据类别和数据标签以形成输入。我的代码是:
CSS 内容 - 换行符
我想用 CSS 换行。我正在使用内容。 td:before { content: "Test\A Test2"; } 它不工作。如何正确
Java HashMap 内容
这个问题已经有答案了: Java Class that implements Map and keeps insertion order? (8 个回答) 已关闭 6 年前。我有一个 HashMap
java - JMeter从SFTP文件夹中获取最新的文件/内容
我正在尝试使用 JMeter 执行端到端测试。测试涉及写入SFTP文件夹并从另一个SFTP文件夹读取写入操作生成的文件。我能够使用 JMeter SSH SFTP 插件连接到 SFTP 文件夹，并能
Java:上传文件并获取文件的字符串(内容)
您好，我有带有标准服务器端 Servlet 的 GWT 客户端。我可以从 GWT 客户端上传文件并在服务器端读取其内容我可以将其作为字符串发送回客户端但是我有 GWT FormPanel与操作
特定文件夹中允许的 Plone 内容
我在 Plone 4.3.9 中创建了一个自定义类型的灵巧性，称为 PersonalPage，必须只允许在特定文件夹中使用成员文件夹/用户文件夹 . 在他的 FTI 中，默认情况下 False .
Android:在新的应用程序版本中更改小部件的布局/内容
在新(更新)版本的应用程序中更改小部件布局的最佳做法是什么？当新版本提供更新、更好的小部件时，如何处理现有小部件？最佳答案我认为您必须向用户显示一个弹出窗口，说明“此版本中的新功能”并要求他们重新
旋转手机时Android隐藏 fragment 内容
在我的应用程序中，我使用支持 View 寻呼机和 PagerTabStrip。进入查看寻呼机我有一些 fragment ，进入其中一个我正在使用支持卡片 View 。运行应用程序后，所有卡片 View
Android更新textview计时器并刷新 map 内容？
我有以下布局文件。基本上我有谷歌地图，在左上角我有一个 TextView，我需要在其中每 15 秒保持一次计数器以刷新 map 。布局很好。
垃圾收集递归时的Java map 内容？
我使用如下结构: HashMap > > OverallMap 如果我这样做: OverallMap . clear ( ) clear() 丢弃的所有内容(HashMap 对象、Integer 对
php - 最佳实践ajax随机加载更多图像(内容)
我在数据库中有 1000 张图像。在页面加载时，我随机显示 60 张图片，当用户滚动时，我通过 AJAX 请求添加 20 张图片。第一种方法我所做的是将所有图像加载到一个容器中，然后隐藏所有图像并
表格消失后的 HTML 内容
我正在使用 woocommerce 创建一个网上商店。我想在每个产品上添加一个包含产品信息的表格，例如颜色、交货时间等等。但是当我添加这张表时。本产品消失后的所有内容。我的表的代码: td {
html - 内容:“”的作用是什么？
This question already has an answer here: What does an empty value for the CSS property content do?
javascript - 如何只点击模态外观而不点击对话框/内容？
因此，我正在与我的 friend 一起为 Google Chrome 开发一个扩展程序，对于大多数功能(即日历、设置等)，我们打开一个模式，这样我们就不必重定向到另一个页面。当您在内容之外单击时，我们
侧面带有垂直标题的 CSS 内容
我将可变高度的 CSS 框设置为在更大的 div 中向左浮动。现在我想添加一个标题，其中文本在框的左侧垂直显示(旋转 90 度)，如下面的链接所示(抱歉还不能发布图片)。 http://imagesh
html - 内容/页脚的宽度小于浏览器宽度
相关页面位于 www.codykrauskopf.com/circus 如果您查看我页面的右侧，在半透明容器和浏览器窗口边缘之间有一个间隙。我看了看，出于某种原因，wrap、main、content

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 具有转换内容的图像悬停效果