CSS3 Transition won't trigger on hover

Question

I have a fairly basic index page with various different links to reports. These links are a divs with an image inside of them, some text, and rounded corners. At the moment the background of the div changes color on hover. I wanted to add a Transition to make them pop out a bit on hover. The execs love stuff like that. However, it doesn't seem to want to take

<textarea type="textarea" name="form2output" 
onclick="this.focus();this.select()"               
id="output2" 
cols="70" rows="25" placeholder="Name:
Number:
Y N?:
Question?:&#x0a;
Notes:&#x0a;
Issue:&#x0a;
Action:"></textarea>

 document.getElementById("output2").value = output;

I am a bit new to CSS animations in general, and I'm in the process of tidying up a bootstrap template I used to build this page. Any advice would be appreciated to help polish or streamline what I'm trying to do.

Here's a screenshot of what the links look like on the page now:

The links to go ShinyDashboard Apps, but this page is just HTML.

Answer 1

This may require some minor edits depending on your preference, but place the transition property in the .card class with the original size. Then remove the transition property from .card:hover and add the new size there. This link may help: https://www.w3schools.com/css/css3_transitions.asp

                    //if (item.Top == 0)
                    //{
                    //    view.SetSelection(0);
                    //    return;
                    //}

                    _bSnapScroll = true;

                    //int scrollBy = item.Top > 0
                    int scrollBy = item.Top >= 0
                        ? top >= btm ? btm - view.ListPaddingTop : -(view.ListPaddingTop - top)
                        : top >= btm ? btm - view.ListPaddingTop : -(view.ListPaddingTop + top);

Answer 2

您尚未指定您期望的确切输出，但是在您的情况下，转换进/出背景这样简单的事情应该有效。

example

transition: width 2s, height 2s;

这条规则没有任何意义，转换准备一个元素来平滑地动画它的属性，如果你想要动画width或height，你应该将宽度/高度从0转换到某个值但是你的代码中没有指明