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

标签 jquery html css image hover

我正在尝试实现这种效果 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/

上一篇：html - 如何将页脚向右移动一些？

下一篇：jquery - anchor 标记破坏具有哈希更改 URL 的页面

相关文章：

javascript - 单击按钮将值传递给 jquery 函数

javascript - 如何使用 JavaScript 更新/更改 HTML 内容并防止页面刷新？

html - Mozilla Firefox 显示图片的不同位置

php - Jquery - 如何使用带有复选框的 Hide() 来启用动画(过渡)？

css - 水平两行CSS菜单问题

jquery - 如何使用 jQuery 步骤提交表单向导

jQuery:一次只展开一个面板

javascript - 有 2 个独立的 <nav> 标签独立工作

html - 使用CSS在悬停时更改透明图像的颜色

jquery - CSS Div 内容与其他内容重叠

©2024 IT工具网  联系我们