Question

这种过渡现在并不太漂亮，但是如何在悬停时将其滑动并在悬停后向下滑动比现在更好？
这是此代码的演示 JSFiddle（代码太多）

.employee-box {
border:2px solid #F9BA16;
background:#fff;
height:500px;
width:350px;
mediamax-width:480px {;
max-width:250px;
margin:0 auto 35px;
}

hr {
width:100%;
border-color:#fff;
border-width:6px;
margin:0 auto;
}

img {
max-height:430px;
padding:40px 0 20px;
}

.employee-more {
position:relative;
-webkit-transition:all .4s ease-out;
-o-transition:all .4s ease-out;
transition:all .4s ease-out;
imgposition:relative;
background:#fff;
border-radius:50%;
width:39px;
height:39px;
top:-20px;
left:43%;
padding:10px;
}

h1 {
text-align:center;
font-size:28px;
color:#fff;
padding-bottom:10px;
margin:-15px 0 0;
}

.details {
display:none;
text-align:center;
details-addressfont-size:20px;
font-style:italic;
}

i {
color:#fff;
border-radius:50%;
border:3px solid #fff;
width:40px;
height:40px;
font-size:22px;
fa-envelopepadding:6px 5px;
}

&.fa-phone {
padding:8px 0;
}

.details-contact {
font-size:30px;
color:#fff;
font-style:italic;
}

.details-desc {
font-style:italic;
font-size:14px;
padding:5px 10px;
}

.employee-rank {
position:absolute;
padding-top:40px;
bottom:-33px;
left:25%;
ppadding-bottom:32px;
text-align:center;
font-size:16px;
}

&:hover {
employee-moretop:-438px;
background:rgba(#F9BA16,.9);
height:465px;
transition:all .4s ease-in;
detailsdisplay:block;
}

Answer 1

您可以translateY使用.employee-more代替top

Answer 2

检查一下，我希望你喜欢它： https://jsfiddle.net/72bd2zhb/2/

$PrimaryColor: #F9BA16;
section.bok-employees {
  .bok-employees-content {
    .bok-employees-boxes {
      .employee-box {
        border: 2px solid $PrimaryColor;
        background: #fff;
        position:relative;
        height: 500px;
        width: 350px;
        margin: 0 auto 35px;
        overflow:hidden;
        @media ( max-width: 480px) {
          max-width: 250px;
        }
        hr {
          border-width: 6px;
          border-color: $PrimaryColor;
          width: 112px;
          margin: 0 auto;
        }
        img {
          padding: 40px 0 20px;
          max-height: 430px;
        }
        .employee-more {
          background: $PrimaryColor;
          position: relative;
          top: -40px;
          -webkit-transition: all 0.5s ease-out;
          -o-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
          img {
            position: relative;
            background: #fff;
            border-radius: 50%;
            padding: 10px;
            width: 39px;
            height: 39px;
            top: -20px;
            left: 43%; //110px;
            @include rotateAnimation();
          }
          h1 {
            margin: 0;
            text-align: center;
            font-size: 28px;
            color: #fff;
            margin-top: -15px;
            padding-bottom: 10px;
            @include BoldItalic();
          }
          .details {
            opacity: 0;
            text-align: center;
            -webkit-transition: all 0.5s ease-out;
          -o-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
            .details-address {
              font-size: 20px;
              font-style: italic;
            }
            i {
              color: #fff;
              border-radius: 50%;
              border: 3px solid #fff;
              width: 40px;
              height: 40px;
              font-size: 22px;
              &.fa-envelope {
                padding: 6px 5px;
              }
              &.fa-phone {
                padding: 8px 0;
              }
            }
            .details-contact {
              font-size: 30px;
              color: #fff;
              font-style: italic;
            }
            hr {
              border-color: #fff;
              width: 100%
            }
            .details-desc {
              font-style: italic;
              font-size: 14px;
              padding: 5px 10px;
            }
          }
        }
        .employee-rank {
          position: absolute;
          //padding-top: 40px;
          bottom: -33px;
          left: 0;
          right:0;
          -webkit-transition: all 0.5s ease-out;
              -o-transition: all 0.5s ease-out;
              transition: all 0.5s ease-out;
          p {
            padding-bottom: 32px;
            text-align: center;
            font-size: 16px;
          }
        }
        &:hover {
          .employee-more {
            top: -405px;
            background: rgba( $PrimaryColor, .9);
            height: 465px;
            -webkit-transition: all 0.5s ease-in;
            -o-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;
            .details {
              opacity: 1;
              -webkit-transition: all 0.5s ease-out;
              -o-transition: all 0.5s ease-out;
              transition: all 0.5s ease-out;

            }
          }
          .employee-rank {
                bottom:-60px;
                 -webkit-transition: all 0.5s ease-out;
                  -o-transition: all 0.5s ease-out;
                  transition: all 0.5s ease-out;
                }
        }
      }
    }
  }
}

淡化内容的过渡

2 个答案: