Jquery 悬停时的过渡背景覆盖

在谷歌上搜索了一个小时，却找不到答案。你们谁能帮帮我吗？ 它主要是做我想做的一切，但我想过渡覆盖，而不是让它管理单元和输出。我还希望能够在相同的操作中稍微缩放图标。如果需要的话，jquery可以打开更多。提前谢谢。 附加代码段

.leftPanel{
背景色：#fb5757；
位置：绝对位置；
身高：100%；
宽度：50%；
}
.leftPanel:悬停{
背景图像：url（“http://www.soundtrackgeek.com/_WebThemes/pixelation/assets/images/fancybox/fancybox-overlay.png");
背景尺寸：封面；
背景重复：无重复；
}
.右面板{
背景色：#2f；
位置：绝对位置；
身高：100%；
宽度：50%；
左：50%；
}
.右面板：悬停{
背景图片：url(http://2.bp.blogspot.com/-7ddmFBemMJY/UZy726LC2LI/AAAAAAAAC7w/WcwIHoWSSRU/s1600/hex-grid-overlay.png);
背景尺寸：封面；
背景重复：无重复；
}
.文本{
显示：内联块；
}
.img文本{
显示：内联；
宽度：60%；
利润率最高：45%；
左边距：15%；
}

---

这可以通过播放一些伪元素（

：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;
}

---

检查：

您对

CSS转换的搜索是否出现？或者？我做了，但是当尝试转换bg图像时，它都崩溃了。当你让它工作时，一个问题是让转换在dom树上足够远，这样它就可以进行内外转换。幸运的是，这会成功的。非常感谢。