Question

我正在尝试进行一些过渡。

目前我的街区有3个部分：

base block
悬停图片（来自顶部）
悬停标题（来自机器人）

鼠标悬停时，背景颜色也会发生变化。

鼠标到达时一切正常，目标是在光标离开时制作相同的逆动画。

#studio {
  margin-top:50px;
  margin-left:50x;
}

#studio #portfolie {
  position: relative;
  z-index: 10;
}
#studio #portfolie .content-porfolio {
  text-align: center;
  width: 800px;
  margin: 0 auto 140px;
}
#studio #portfolie .project-title--hover {
  bottom: -19px;
  transition: bottom .7s ease;
}
#studio #portfolie .project-logo--hover {
  margin-top: -100px;
  transition: margin-top 0.7s ease;
}
#studio #portfolie .md-trigger:hover .project-title--hover {
  display: block !important;
  bottom: 25px;
}
#studio #portfolie .md-trigger:hover .project-logo--hover {
  display: block !important;
  width: 70%;
  margin-left: 15%;
  height: 100px;
  background-repeat: no-repeat;
  margin-top: calc((25%-attr(height))/2);
  background-size: contain;
  background-position: center;
  position: absolute;
  overflow: hidden;
}
#studio #portfolie .project-logo--base {
  height: 100%;
  width: 100%;
  background-repeat: repeat;
  position: absolute;
  overflow: hidden;
}
#studio #portfolie .hover-container {
  transition: background-color 0.5s ease;
  background-color: transparent;
}
#studio #portfolie .md-trigger:hover .hover-container {
  background-color: #F1CE34;
  height: 100%;
  width: 100%;
  position: absolute;
}
#studio #portfolie .content-play {
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}
#studio #portfolie .content-play .slide {
  display: none;
}
#studio #portfolie .content-play > * {
  width: calc(100% * 1 / 3 - 40px);
}
#studio #portfolie .content-play .play {
  height: 200px;
  cursor: pointer;
  position: relative;
  color: #FFF;
  text-transform: uppercase;
  margin-bottom: 40px;
}
#studio #portfolie .content-play .play span {
  font-size: 0.8em;
  position: absolute;
  font-family: 'ProximaNovaA-Black';
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: block;
  width: 100%;
}

<section id="studio">
<div id="portfolie">
<ul class="content-play clearfix grid-3">
  <li data-modal="modal-video-1" class="first play md-trigger slide" id="first-play" style="display: list-item;">
    <div class="project-logo--base" style="background-image: url(http://storage.tvanouvelles.ca/v1/dynamic_resize/sws_path/tvanouvelles_prod/bc7caa6d-8748-495c-8522-a7fc17513ce7_ORIGINAL.jpg?quality=80&size=800x&version=0)">
      <div class="hover-container">
        <div class="project-logo--hover" style="background-image: url(http://www.esoterisme-exp.com/File_images/2012/1205/Carre-bleu.png)"></div>
        <span class="project-title--hover">Tennis festival</span>
      </div>
    </div>
  </li>
</ul>
</div>
</section>

here is the same on CodePen because it looks easier to modify

Answer 1

您可以使用InvoiceClaims伪类。

如果您的问题是蓝色方块没有恢复，请尝试这样：

:not(:hover)

Answer 2

查看“扫到顶部”背景转换here和here。我认为它可以满足您的需求。

留下鼠标过渡

2 个答案: