The other way round

ぼっちんさん、おつかれ様です (●'0'●)/

ショートハンド云々抜きにして、ちょっと力技でやったほうが良いかもしれません。
論理
① 本体に背景色(グラデーションを設定しておく)
② 本体の上にレイヤーを重ねておく(グラデーション設定 + 不透明度設定)

②のレイヤーを初期状態では「完全不透明」にしておきます。
transitionを設定するのもこちらのレイヤーの方。
その上で、マウスホバーがかかった際にレイヤーを徐々に「完全透明」にすることでレイヤーのグラデーションが見えなくなり、下にある本体のグラデーションが見えるようになる。
それがゆっくり切り替わっているように見える、という策(笑)

-------

本体(デフォルトでは .blogcard)に元の内容はそのままで以下の内容を追加

[太字]background: グラデーション内容;
position: relative;[/太字]

-----

レイヤーの作成。以下の内容を追加。。

[太字].blogcard:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: グラデーション内容;
opacity: 1;
position: absolute;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}[/太字]

-----

以下の内容を追加

[太字].blogcard:hover:before {
opacity: 0;
}[/太字]

------

.blogcard-content(「フロート親要素」のコメントがついたもの)に以下の内容を追加

[太字]position: relative;
z-index: 3;[/太字]

-----

.blogcard-footer(「フッター(元記事サイト名とリンク)」のコメントあり)に以下の内容を追加

[太字]position: relative;
z-index: 3;[/太字]

-----

で、レイヤーが[下線]透過[/下線]グラデーションの場合は下が透けて見えることになるので、そこだけちょっと考えてもらった方が良いかもです。
rgb[太字][斜体][斜体]a[/斜体][/斜体][/太字] を使わずに rbgでなるべく淡い色を設定するとか。
一度お試しください (o'ω')ﾉ

管理者にだけ表示を許可する