我希望我的文章跳几个像素,但似乎破坏了flex属性。是否有任何弹性值或我可以添加的东西或更好的选择?我可以用float来做,但是我想知道flex是否可以,如果可以,怎么做?
.article {
background-color: gray;
color: white;
width: 200px;
padding: 10px;
text-align: center;
margin-top: 30px;
transition: 1s all ease;
}
.article:hover {
background: rgba(0, 0, 0, 0.8);
box-shadow: 4px 5px 4px black;
position: absolute;
top: 0;
left: 0;
}
#articleset1 {
display: flex;
justify-content: space-around;
position: relative;
}
<section id="section">
<div class="wrapper">
<div id="articleset1">
<article class="article">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolero vicious lorem de ipsum de lisp Lorem ipsum dolero vicious lorem de ipsum de lisp Lorem ipsum dolero vicious lorem de ipsum de lisp</p>
</article>
<article class="article">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolero vicious lorem Lorem ipsum dolero vicious lorem de ipsum de lispLorem ipsum dolero vicious lorem de ipsum de lisp de ipsum de lisp</p>
</article>
<article class="article">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolero vicious lorem Lorem ipsum dolero vicious lorem de ipsum de lispLorem ipsum dolero vicious lorem de ipsum de lisp de ipsum de lisp</p>
</article>
<article class="article">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolero vicious lorem Lorem ipsum dolero vicious lorem de ipsum de lispLorem ipsum dolero vicious lorem de ipsum de lisp de ipsum de lisp</p>
</article>
</div>
</div>
</section>
谢谢您的帮助!
答案 0 :(得分:1)
悬停时使用transform
.article:hover {
background: rgba(0, 0, 0, 0.8);
box-shadow: 4px 5px 4px black;
z-index: 111;
transform: scale(1.1);
}