css - 无法弄清楚如何在 CSS 中悬停时停止部分抖动
问题描述
我创建了一个完美运行的故事部分。但是当该部分悬停时,它有一个摇晃的问题。我无法摆脱它。
.heading-tertiary {
font-size: 1.4rem;
font-weight: 700;
text-transform: uppercase;
}
.u-center-text {
text-align: center !important; }
.u-margin-bottom-8 {
margin-bottom: 8rem; }
.story {
width: 75%;
margin: 0 auto;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
background-color: white;
border-radius: 3px;
padding: 3rem;
padding-top: 4rem;
padding-bottom: 5rem;
font-size: 1.2rem;
transform: skewX(-12deg); }
.story > * {
transform: skewX(12deg); }
.story__shape {
width: 15rem;
height: 15rem;
float: left;
-webkit-shape-outside: circle(64% at 50% 50%);
shape-outside: circle(64% at 50% 50%);
-webkit-clip-path: circle(38% at 50% 50%);
clip-path: circle(38% at 50% 50%);
transform: translateY(-3rem) skewX(12deg);
position: relative; }
.story__img {
height: 100%; }
.story__text {
transform: skewX(12deg); }
.story__caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);
color: white;
text-transform: uppercase;
font-size: 1.6rem;
text-align: center;
opacity: 0;
transition: all 0.5s;
backface-visibility: hidden; }
.story:hover .story__caption {
opacity: 1;
transform: translate(-50%, -50%); }
.row {
max-width: 114rem;
margin: 0 auto;
margin-bottom: 8rem;
padding: 0 5rem 0 5rem; }
.row:last-child {
margin-bottom: 0; }
.row::after {
content: "";
display: table;
clear: both; }
.section-stories {
padding: 5rem 0;
background-color: #f7f7f7; }
<section class="section-stories">
<div class="row">
<div class="story">
<figure class="story__shape">
<img src="https://i.imgur.com/FJZHe8T.jpg" alt="Person on a tour" class="story__img">
<figcaption class="story__caption">NAME</figcaption>
</figure>
<div class="story__text">
<h3 class="heading-tertiary .u-margin-bottom-8">Heading Heading Heading</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque aperiam, molestias ut, repudiandae, nobis quidem illum explicabo delectus ullam officiis voluptate aut sit quisquam ab id. Repellendus.
</p>
</div>
</div>
</div>
</section>
我删除了所有的过渡属性,但也没有用。即使我需要那些转换属性,所以我不能像那样删除它们。有什么解决办法吗?如果您需要,这是 jsfiddle 链接。
解决方案
推荐阅读
- reactjs - React Speech Recognition - 通过更新状态将文本插入内存
- rpm - 从 rpm 构建 YUM
- python - 如何在选择选项字段中保存/显示 manytomany 字段
- swift - 实体的命名约定及其协议(接口)
- javascript - 如何正确捕获 JavaScript Click 事件以隐藏和显示 Div?
- go - 将字符串转换为自定义结构 Go
- python - 使用 Python 3.8 过滤 API JSON 响应
- powershell - 从 EventViewer 获取具有特定安全 ID 的计算机名称
- wpf - 如何使用 SVG 格式的矢量图像样式进行操作?
- autodesk-forge - AutoDesk Forge Viewer:使用 SVF 的 URN 加载模型