悬停时过渡背景叠加

Question

Google 搜索了一个小时，但找不到答案。你们中的一个可以帮我吗？它主要是做我想做的一切，但我想转换叠加层，而不是让它快速进出。我还希望能够在同一操作中稍微缩放图标。如果需要，可以向 jquery 开放。提前致谢。附上代码片段。

.leftPanel {
  background-color: #fb5757;
  position: absolute;
  height: 100%;
  width: 50%;
}
.leftPanel:hover {
  background-image: url("http://www.soundtrackgeek.com/_WebThemes/pixelation/assets/images/fancybox/fancybox-overlay.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.rightPanel {
  background-color: #2f2f2f;
  position: absolute;
  height: 100%;
  width: 50%;
  left: 50%;
}
.rightPanel:hover {
  background-image: url(http://2.bp.blogspot.com/-7ddmFBemMJY/UZy726LC2LI/AAAAAAAAC7w/WcwIHoWSSRU/s1600/hex-grid-overlay.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.texts {
  display: inline-block;
}
.texts img {
  display: inline;
  width: 60%;
  margin-top: 45%;
  margin-left: 15%;
}

<div class="leftPanel">
  <div class="texts">
    <a href="#">
      <img src="https://www.globalbrigades.org/media_gallery/thumb/320/0/Dental_2014_Icon_Small.png">
    </a>

  </div>
</div>
<div class="rightPanel">
  <div class="texts">
    <a href="#">
      <img src="https://www.globalbrigades.org/media_gallery/thumb/320/0/Engineering_2014_Icon_Small.png" id="dev-text">
    </a>

  </div>
</div>

Answer 1

这可以通过使用伪元素（:before 和 :after）来完成。

相关CSS：

.leftPanel:after, .rightPanel:after {
  content: "";
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  transition: 1s;
}
.leftPanel:after{
  background-image: url("http://www.soundtrackgeek.com/_WebThemes/pixelation/assets/images/fancybox/fancybox-overlay.png");
}
.rightPanel:after{
  background-image: url(http://2.bp.blogspot.com/-7ddmFBemMJY/UZy726LC2LI/AAAAAAAAC7w/WcwIHoWSSRU/s1600/hex-grid-overlay.png);
}
.leftPanel:hover:after, .rightPanel:hover:after {
    opacity: 1;
}
.texts{
    position: relative;
    z-index: 1;
}

检查：https://jsfiddle.net/lmgonzalves/7pnatg52/2/

悬停时过渡背景叠加

transition background overlay on hover

jquery

css

css-transitions

transition