My index page features various links to reports, each styled as a div with an image, text, and rounded corners. Currently, the background color of the div changes on hover, but I wanted to add a Transition effect to make them stand out more. The higher-ups enjoy those kinds of enhancements. However, I'm facing some challenges in implementing this.
.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>
... (other card divs) ...
</div>
</div>I am relatively new to CSS animations and currently refining a bootstrap template used for this page. Any suggestions on how to enhance or optimize my approach would be greatly appreciated.
Here's a snapshot of the current look of the links on the page: https://i.sstatic.net/yeJtH.png
Although the links lead to ShinyDashboard Apps, this particular page is built using just HTML.