在不改变背景的情况下对倾斜 div 的悬停效果

Question

我需要帮助来提高我的 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 并且我的图像继续保持方形。

Answer 1

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

.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>

Answer 2

倾斜需要在 "content" 然后是背景正方形和动画倾斜。

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

Answer 3

据我了解，您想倾斜文本而不是背景图像和背景颜色。这是我的解决方案。

[HTML] 在您的 a 标签内放置一个 div 并将 class="info" 放在那里。
[CSS] 将 skew 从 class .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>

在不改变背景的情况下对倾斜 div 的悬停效果

Hover effect on skewed div without change background

css

hover

css-transitions

skew