我正在尝试在我的Wordpress网站上实现此效果https://www.unispace.com/about/our-people，但我无法获得标题 - ＆gt;在悬停时打开图像的详细信息。它主要是在图像的末尾切断。
.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>
答案 0 :(得分：0)
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>