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

时间：2019-06-13 15:04:44

标签： css hover css-transforms skew

我有5行是倾斜的。

其中三个应该在悬停时显示带有链接的非倾斜背景图像。

此刻，实现存在一些问题：

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

布局： 上面是没有悬停效果的布局，下面是悬停效果 enter image description here

UPD ：使用Oliver的解决方案，我已经实现了目标。但是还剩下一个问题：真棒字体，文本和显示的图片歪斜了，而它们应该是直的。

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

解决

1 个答案:

答案 0 :(得分：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">

相关问题
最新问题