html - 当我将鼠标悬停在图像上时动画不起作用
问题描述
我正在尝试在图像上的右侧动画中添加扫描,这样当您将图像悬停时,它会向右扫描,并且在悬停时也会显示文本。我可以通过按钮找到它,但我不知道如何去做。这是我到目前为止的代码:
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>
解决方案
我认为根据您的描述,您正在尝试做的是一个transform
. 为此,只需translateX
向 css 添加一个转换(您想要的大小)。
希望这可以帮助。
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-box img.animate:hover{
transform: translateX(5em);
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img class="animate" src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>
推荐阅读
- regex - 正则表达式:匹配字母数字和空格,但前导空格除外
- python - 如何创建一个循环,或者如何将先前 SELECT 语句的结果用于下一个 SELECT 语句?
- asp.net - 如何使 MVC 应用程序使用自定义错误页面
- r - 获取包含与另一个数据集中的值最相似的值的行的行索引#
- sql - 查找具有最大部门数的部门块号
- c++ - 尝试使用 XOR 和位移运算符切换随机 LED
- javascript - Express response.redirect 上的“整数输入语法无效”错误
- python - 如何从数据框中的分类变量中找到定量变量的平均值?
- docker - 推送与 x 相同的图像 x:latest:
- python - 运行程序时出现无限循环。我如何解决它?