缩放引导卡而不影响连续的下一张卡

Question

我希望卡元素在悬停时放大。问题是，有卡在循环播放并连续显示时。缩放特定的卡时，直接右卡会通过重叠影响缩放卡。

我尝试在CSS中给出position：absolute。它不起作用。 我在网上找不到预期的解决方案。

下面是我的代码：

.card-collection 
{
    display: flex;
}

.card 
{
    display: flex;
    flex-direction:row;
    border: 1px solid red;
    
}

.card:hover
{ 
  transform: scale(2);
}

 
      <div class="card-collection">

        <div class="card">
          <div class="card-body">
            <h5 class="text-center"> Aravind </h5>
            <p>Chennai</p>
          </div>
        </div>
        
         <div class="card">
          <div class="card-body">
            <h5 class="text-center"> Ravi </h5>
            <p>Chennai</p>
          </div>
        </div>
        
         <div class="card">
          <div class="card-body">
            <h5 class="text-center"> Aravind </h5>
            <p>Chennai</p>
          </div>
        </div>
       
      </div>
 

实际上，我正在研究Angular。这就是我得到的输出：

Answer 1

使用这个，我用过背景：#fff;仅用于演示，您可以在使用时将其删除

  

position: initial CSS关键字将属性的初始值应用于元素。我使用它是为了使z-index有效。

.card-collection 
{
    display: flex;
}

.card 
{
    display: flex;
    flex-direction:row;
    border: 1px solid red;
    
}

.card:hover
{ 
  transform: scale(2);
  position:initial;
  z-index:111;
  background:#fff;
}

<div class="card-collection">

        <div class="card">
          <div class="card-body">
            <h5 class="text-center"> Aravind </h5>
            <p>Chennai</p>
          </div>
        </div>
        
         <div class="card">
          <div class="card-body">
            <h5 class="text-center"> Ravi </h5>
            <p>Chennai</p>
          </div>
        </div>
        
         <div class="card">
          <div class="card-body">
            <h5 class="text-center"> Aravind </h5>
            <p>Chennai</p>
          </div>
        </div>
       
      </div>