CSS3遷移がホバー上でトリガーされない

Question

私はかなり基本的なインデックスページを持ち、レポートへのさまざまなリンクがあります。これらのリンクは、それらの内部の画像、テキスト、および丸みのあるコーナーを含むdivです。現時点では、divの背景がホバーで色が変わります。私はそれらをホバー上に少し飛び出させるためにトランジションを追加したかったのです。エグゼクティブはそのようなものを愛する。しかし、私が一般的にCSSアニメーションに新しいビット午前

.card { 
 
    float: left; 
 
    width: 32%; 
 
    padding: 5px; 
 
    margin: .5%; 
 
    text-align: right; 
 
    border-radius: 15px 50px; 
 
} 
 

 
.card:hover { 
 
    -webkit-transition: width 2s, height 4s; 
 
    /* Safari */ 
 
    transition: width 2s, height 2s; 
 
    background-color: #b9d6a0; 
 
    color: black; 
 
} 
 

 
.card>img { 
 
    margin-bottom: 12px; 
 
} 
 

 
.card-text { 
 
    font-size: 85%; 
 
} 
 

 
.dashboardlink { 
 
    width: 100%; 
 
    height: auto; 
 
    border-radius: 15px 50px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="card"> 
 
     <a href="/ip" target="_blank"> 
 
     <img class="dashboardlink" src="/images/ip.png" alt="Immediate Pays"> 
 
     </a> 
 
     <p class="card-text">Immediate Payments</p> 
 
    </div> 
 

 

 
    <div class="card"> 
 
     <a href="/ipmtd" target="_blank"> 
 
     <img class="dashboardlink" src="/images/ipmtd.png" alt="Immediate Pays - MTD"> 
 
     </a> 
 
     <p class="card-text">Immediate Payments Month-To-Date</p> 
 
    </div> 
 

 

 
    <div class="card"> 
 
     <a href="/ivrPayments" target="_blank"> 
 
     <img class="dashboardlink" src="/images/ivrPayments.png" alt="IVR Payments"> 
 
     </a> 
 
     <p class="card-text">IVR Payments</p> 
 
    </div> 
 

 

 
    <div class="card"> 
 
     <a href="/outboundHold" target="_blank"> 
 
     <img class="dashboardlink" src="/images/outboundHold.png" alt="Outbound Holds"> 
 
     </a> 
 
     <p class="card-text">Outbounds Holds</p> 
 
    </div> 
 

 

 
    <div class="card"> 
 
     <a href="/poolPen" target="_blank"> 
 
     <img class="dashboardlink" src="/images/PoolPen.png" alt="Pool Penetration"> 
 
     </a> 
 
     <p class="card-text">Pool Penetration</p> 
 
    </div> 
 

 

 
    <div class="card"> 
 
     <a href="/Tracker" target="_blank"> 
 
     <img class="dashboardlink" src="/images/Tracker.png" alt="Tracker"> 
 
     </a> 
 
     <p class="card-text">Tracker Dashboard</p> 
 
    </div> 
 

 

 
    <div class="card"> 
 
     <a href="/userLookup" target="_blank"> 
 
     <img class="dashboardlink" src="/images/userLookup.png" alt="User Lookup"> 
 
     </a> 
 
     <p class="card-text">SCSI User Lookup</p> 
 
    </div> 
 

 
    <div class="card"> 
 
     <a href="/inventory" target="_blank"> 
 
     <img class="dashboardlink" src="/images/inventory.png" alt="Inventory"> 
 
     </a> 
 
     <p class="card-text">Inventory</p> 
 
    </div> 
 

 
    </div> 
 
</div>

をしたいとは思われない、と私は私が使用したブートストラップテンプレートを片付けの過程にいますよこのページを作成する私がやろうとしていることを磨くか合理化するのに役立つアドバイスをいただければ幸いです。

はここのリンクは今ページでどのように見えるかのスクリーンショットです：

リンクはShinyDashboardアプリを行くために、このページは単なるHTMLです。

Answer 1

これには好みに応じてマイナーな編集が​​必要な場合がありますが、トランジションプロパティは元のサイズの.cardクラスに配置します。次に、.card：hoverからトランジションプロパティを削除し、そこに新しいサイズを追加します。このリンクは役立つことがあります。https://www.w3schools.com/css/css3_transitions.asp

.card { 
    float: left; 
    width: 32%; 
    padding: 5px; 
    margin: .5%; 
    text-align: right; 
    border-radius: 15px 50px; 
    -webkit-transition: width 2s, height 4s; 
    /* Safari */ 
    transition: width 2s, height 2s; 
} 

.card:hover { 
    width: (insert new size as needed) 
    background-color: #b9d6a0; 
    color: black; 
} 

Answer 2

をあなたが期待する正確なものを出力指定したが、背景には、あなたのケースで動作するはずです/アウトでの移行のような単純なものではないしています。

example

ここで、このルールは意味をなさない

transition: width 2s, height 2s; 

は、移行は、それはあなたがwidthやheightをアニメーション化したい場合、あなたには、いくつかの0からの移行幅/高さをやるべきこと、スムーズな特性をだアニメーション化する要素を準備します値はコード内に指定されていません