悬停效果在倾斜的 div 上，无需更改背景

我需要帮助来改进我的css。我想在倾斜的div 中制作悬停效果，而不会影响我放在div 上的图像。

.overlay-box {
  position: relative;
  width: 150px;
  height: 150px;
  transform: skew(-10deg);
  display: inline-block;
}
.overlay-box img {
  height: 100%;
  width: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
  padding-top: 50%;
  opacity: 0;
  transition: ease-in-out .7s background;
  transition: ease-in-out .7s opacity;
}
.content:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .8);
}
.info {
  font-size: 6vh;
  text-decoration: none;
}
.content a {
  color: white;
  text-decoration: none;
}

<div class="overlay-box">
  <img src="img/bg1.jpg" alt="">
  <div class="content">
    <a href="#" class="info" title="Full Image">SERVIÇOS</a>
  </div>
</div>

但是这段代码会影响我的背景图像，我如何扭曲我的div 并且我的图像继续在方形方面。

您可以在图像上应用反向倾斜并调整溢出：

.overlay-box {
  position: relative;
  width: 150px;
  height: 150px;
  transform: skew(-10deg);
  display: inline-block;
  overflow:hidden;
  margin:20px;
}
.overlay-box img {
  height: 100%;
  width:calc(100% + 40px);
  margin:auto -20px;
  transform: skew(10deg);
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
  padding-top: 50%;
  opacity: 0;
  transition: ease-in-out .7s background;
  transition: ease-in-out .7s opacity;
}
.content:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .8);
}
.info {
  font-size: 6vh;
  text-decoration: none;
}
.content a {
  color: white;
  text-decoration: none;
}

<div class="overlay-box">
  <img src="https://lorempixel.com/400/400/" alt="">
  <div class="content">
    <a href="#" class="info" title="Full Image">SERVIÇOS</a>
  </div>
</div>

据我了解，您想扭曲文本，但不想扭曲背景图像，也不是背景颜色。这是我的解决方案。

[HTML] 在a标签中放置一个div，并将class="info"放在那里。
[CSS] 将skew从类.overlay-box移动到.content:hover .info选择器。确保包含两者之间的空格。

.overlay-box {
  position: relative;
  width: 150px;
  height: 150px;
                                     /*remove skew*/
  display: inline-block;
}
.overlay-box img {
  height: 100%;
  width: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(100,100,100,1);
  text-align: center;
  padding-top: 50%;
  opacity: 0;
  transition: ease-in-out .7s background;
  transition: ease-in-out .7s opacity;
}
.content:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .8);
}
.content:hover .info {               /*add this*/
  transform: skew(-10deg);
}
.info {
  font-size: 6vh;
  text-decoration: none;
}
.content a {
  color: white;
  text-decoration: none;
  
}

<div class="overlay-box">
  <img src="img/bg1.jpg" alt="">
  <div class="content">
    <a href="#" title="Full Image"><div class="info">SERVIÇOS</div></a>
  </div>
</div>

倾斜需要在"内容"中，然后是背景方块和动画倾斜。

<html>
    <head>
    <style>
        .overlay-box
        {
            position: absolute;
            width: 150px;
            height: 150px;
            display: inline-block;
        }
        .overlay-box img
        {
            height: 320px;
            width: 380px;
        }
        .content
        {
            position: absolute;
            margin-left: 25px;
            top: 0;
            left: 0;
            height: 100%;
            width: auto;
            background-color: rgba(0,0,0,0);
            text-align: center;
            padding-top: 50%;
            opacity: 0;
            transform: skew(-10deg);
            transition: background .7s ease-in-out;
            transition: opacity .7s ease-in-out;
        }
        .content:hover
        {
            opacity: 1;
            background-color: rgba(0,0,0,.8);
        }
        .info
        {
            font-size: 6vh;
            text-decoration: none;
        }
        .content a
        {
            color:white;
            text-decoration: none;
        }
    </style>
    </head>
    <body>
    <div class="overlay-box">
        <img src="Download.jpg" alt="">
        <div class="content">
            <a href="#" class="info" title="Full Image">SERVIÇOS</a>
        </div>
    </body>
    </html>

相关内容

最新更新

热门标签：