块悬停后显示其他背景图像

Question

我有 5 行是倾斜的。

悬停后，其中三个应显示带有 link 的非倾斜背景图像。

目前这个实现有几个问题：

1). 一旦鼠标光标位于文本块或 Font Awesome 图标上 - 背景图像就会隐藏起来。这是很自然的，因为文本块在可点击区域上方，但我还没有找到解决它的好方法。

2). 小问题 - 显示的背景图像和文本块的项目倾斜。它们应该是直的，没有应用转换。

工作示例is here

标记：

<div class="oblique-block">

   <a href="#" title="Meet the creators" target="_self">
       <div class="oblique first">
          <span class="fa fa-users fa-inverse fa-3" aria-hidden="true">&nbsp;</span>
          <span class="fa-text text-uppercase">Meet <br /> us</span>
       </div>   
   </a>

   <a href="#" title="Cars that found homes" target="_self">
       <div class="oblique">
                  <img src="https://via.placeholder.com/365x458" />
          <span class="fa fa-clock-o fa-3" aria-hidden="true">&nbsp;</span>
          <span class="fa-text text-uppercase">Lorem <br /> ipsum</span>
       </div>
   </a>


   <a href="#" title="Check out the “a”list" target="_self">
       <div class="oblique">
                  <img src="https://via.placeholder.com/365x458" />
          <span class="fa fa-heart-o" fa-3" aria-hidden="true">&nbsp;</span>
          <span class="fa-text text-uppercase">Check the <br /> lorem ipsum</span>
       </div>
   </a>

   <a href="#" title="Dipsum" target="_self">
       <div class="oblique">
                  <img src="https://via.placeholder.com/365x458" />
          <span class="fa fa-map-o fa-3" aria-hidden="true">&nbsp;</span>
          <span class="fa-text text-uppercase">ipsum <br /> loremipsum</span>
       </div>
   </a>

   <a href="#" title="Get in touch with us" target="_self">
       <div class="oblique last">
          <span class="fa fa-comment-o fa-3" aria-hidden="true">&nbsp;</span>
          <span class="fa-text text-uppercase">Get in touch <br /> with us</span>
       </div>
    </a>

</div>

CSS:

.oblique img {  
  opacity: 0;
  filter: alpha(opacity=0);  
  height: 100%;  
  z-index: 100;
}

.oblique img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);  
}

.oblique img:hover ~ .oblique{z-index:-100!important;display:none!important!;}


.oblique-block {
  /*width: 100%;*/
  height: 500px;
  margin-left: 100px;
}
.oblique {
  width: 20%;
  height: 100%;
  background: #3498db;
  position: relative;
  -webkit-transform: skewx(-10deg);
  -moz-transform: skewx(-10deg);
  -o-transform: skewx(-10deg);
  -ms-transform: skewx(-10deg);
  transform: skewx(-10deg);
  transform-origin: top left;
  float: left;
  display: inline;
}
.oblique-block > a:nth-child(even) > div:nth-child(1) {  
  background: #E0AE51;
}

.oblique-block > a:nth-child(odd) > div:nth-child(1) {
  background: #65C7CC;
}

.oblique.last {  
  background: #65C7CC;  
}
.oblique.last:after {
  content: "";
  display: block;
  width: 70%;
  height: 100%;
  background: #65C7CC;
  -webkit-transform: skewx(10deg);
  -moz-transform: skewx(10deg);
  -o-transform: skewx(10deg);
  -ms-transform: skewx(10deg);
  transform: skewx(10deg);
  transform-origin: top left;
  position: relative;
  right: -30%;
}
.oblique.first:before {
  content: "";
  display: block;
  width: 70%;
  height: 100%;
  background: #65C7CC;
  -webkit-transform: skewx(10deg);
  -moz-transform: skewx(10deg);
  -o-transform: skewx(10deg);
  -ms-transform: skewx(10deg);
  transform: skewx(10deg);
  transform-origin: top left;
  position: relative;
  right: 40%;
}

.oblique .fa{
  font-size: 40px;
  font-style: normal; 
  color: #fff;
  margin: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}

.oblique .fa-text{
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  font-weight: bold;
  margin-top: 20px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 24px;
  line-height: 33px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);   
}

.oblique.last .fa-text{z-index:5;}

布局：上面是没有悬停效果的布局，下面是有悬停效果的布局

UPD: 通过 Oliver 的解决方案，我已经实现了目标。但还有一个问题：Font Awesome、文字和显示的图片歪斜了，而它们应该是直的。

UPD2 通过应用多重变换解决 transform: translate(-50%, -50%) skewx(10deg);

Answer 1

我想我已经做到了您所希望的。添加了以下 CSS ，所有注释均已注释，因此应说明用途。如果您还想要其他东西，请告诉我。

// Hide anything that extends beyond the oblique element
.oblique {
  overflow: hidden;
}

// Move hover to the parent oblique so we capture all child elements (i.e. if they hover over the text)
.oblique:hover img {

  // No changes here
  opacity: 1.0;
  filter: alpha(opacity=100);

  // Add a transformation to correct for the transformation of the parent oblique
  -webkit-transform: skewx(10deg); 
  -moz-transform: skewx(10deg);
  -o-transform: skewx(10deg);
  -ms-transform: skewx(10deg);
  transform: skewx(10deg);


  // Move the image a little to the left so that we don't get a gap from the transformation
  margin-left: -10px;

}

演示

.oblique img {
  opacity: 0;
  filter: alpha(opacity=0);
  height: 100%;
  z-index: 100;
}

.oblique {
  overflow: hidden;
}

.oblique:hover img {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -webkit-transform: skewx(10deg);
  -moz-transform: skewx(10deg);
  -o-transform: skewx(10deg);
  -ms-transform: skewx(10deg);
  transform: skewx(10deg);
  margin-left: -10px;
}

.oblique img:hover~.oblique {
  z-index: -100!important;
  display: none!important!;
}

.oblique-block {
  /*width: 100%;*/
  height: 500px;
  margin-left: 100px;
}

.oblique {
  width: 20%;
  height: 100%;
  background: #3498db;
  position: relative;
  -webkit-transform: skewx(-10deg);
  -moz-transform: skewx(-10deg);
  -o-transform: skewx(-10deg);
  -ms-transform: skewx(-10deg);
  transform: skewx(-10deg);
  transform-origin: top left;
  float: left;
  display: inline;
}

.oblique-block>a:nth-child(even)>div:nth-child(1) {
  background: #E0AE51;
}

.oblique-block>a:nth-child(odd)>div:nth-child(1) {
  background: #65C7CC;
}

.oblique.last {
  background: #65C7CC;
}

.oblique.last:after {
  content: "";
  display: block;
  width: 70%;
  height: 100%;
  background: #65C7CC;
  -webkit-transform: skewx(10deg);
  -moz-transform: skewx(10deg);
  -o-transform: skewx(10deg);
  -ms-transform: skewx(10deg);
  transform: skewx(10deg);
  transform-origin: top left;
  position: relative;
  right: -30%;
}

.oblique.first:before {
  content: "";
  display: block;
  width: 70%;
  height: 100%;
  background: #65C7CC;
  -webkit-transform: skewx(10deg);
  -moz-transform: skewx(10deg);
  -o-transform: skewx(10deg);
  -ms-transform: skewx(10deg);
  transform: skewx(10deg);
  transform-origin: top left;
  position: relative;
  right: 40%;
}

.oblique .fa {
  font-size: 40px;
  font-style: normal;
  color: #fff;
  margin: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}

.oblique .fa-text {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  margin-top: 20px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 24px;
  line-height: 33px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.oblique.last .fa-text {
  z-index: 5;
}

<script src="https://use.fontawesome.com/1eff64076c.js"></script>

<div class="oblique-block">

  <a href="#" title="Meet the creators" target="_self">
    <div class="oblique first">
      <span class="fa fa-users fa-inverse fa-3" aria-hidden="true">&nbsp;</span>
      <span class="fa-text text-uppercase">Meet <br /> us</span>
    </div>
  </a>

  <a href="#" title="Cars that found homes" target="_self">
    <div class="oblique">
      <img src="https://placeimg.com/640/480/any" />
      <span class="fa fa-clock-o fa-3" aria-hidden="true">&nbsp;</span>
      <span class="fa-text text-uppercase">Lorem <br /> ipsum</span>
    </div>
  </a>


  <a href="#" title="Check out the “a”list" target="_self">
    <div class="oblique">
      <img src="https://placeimg.com/640/480/any" />
      <span class="fa fa-heart-o fa-3 " aria-hidden="true ">&nbsp;</span>
      <span class="fa-text text-uppercase ">Check the <br /> lorem ipsum</span>
    </div>
  </a>

  <a href="# " title="Dipsum " target="_self ">
    <div class="oblique ">
      <img src="https://placeimg.com/640/480/any" />
      <span class="fa fa-map-o fa-3 " aria-hidden="true ">&nbsp;</span>
      <span class="fa-text text-uppercase ">ipsum <br /> loremipsum</span>
    </div>
  </a>

  <a href="# " title="Get in touch with us " target="_self ">
    <div class="oblique last ">
      <span class="fa fa-comment-o fa-3 " aria-hidden="true ">&nbsp;</span>
      <span class="fa-text text-uppercase ">Get in touch <br /> with us</span>
    </div>
  </a>

</div>

<img src="https://placeimg.com/640/480/any">

块悬停后显示其他背景图像

Show other background image once block is hovered

css

hover

css-transforms

skew

演示