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

【问题标题】：Hover effect on skewed div without change background在不改变背景的情况下对倾斜的 div 进行悬停效果
【发布时间】：2018-07-13 01:28:22
【问题描述】：

我需要帮助来改进我的 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 并且我的图片在正方形方面继续。

【问题讨论】：

您只希望文本倾斜？不是黑色背景吧？

标签： css hover css-transitions skew

【解决方案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>

【讨论】：

你好，我试过这样做，但在我的 div 覆盖框上，它显示为背景。她没有覆盖div。你看到运行 sn -p 的效果了吗？
@AndréAlanAlves 我没听懂你……你能详细说明一下吗
你好，我希望我的图像切割成与 div 相同形状的倾斜，但不影响图像。你听得懂吗？
我想我在制作效果之前需要剪切图像，我是对的吗？
您好，目前我有这个，但图像有失真，我不希望我的图像出现这种失真。但她必须坚持下去你明白我的意思吗？ andrealanengenharia.com.br/templates/1/newindex.php

【解决方案2】：

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

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

【讨论】：

如果它帮助您解决问题，请考虑接受我的回答。谢谢！

【解决方案3】：

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

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

【讨论】：