子テーマの style.css に以下の CSS を書いた場合、ご希望に沿うでしょうか？

・画像では長いタイトルだと2列目の文字がはみ出ているが、はみ出してしまう部分を省略したり画像内に綺麗におさめたい

※ 文字を 2 行で省略しています。

.popular-entry-cards.large-thumb-on .card-content {
  max-height: none;
}

.popular-entry-cards.large-thumb-on .card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

・画像にカーソルを合わせるとタイトル部分が消え画像のみになるが、カーソルを合わせてもタイトルを表示し続けたい

.popular-entry-cards.large-thumb-on .a-wrap:hover .card-content {
  margin-bottom: 0;
  opacity: 1;
}

・現在タイトルの背景が薄黒い感じになっているがここの色を変えたい

.popular-entry-cards.large-thumb-on .card-content {
  background: rgba(162 96 191 / 0.8);
  backdrop-filter: blur(6px) saturate(180%);
  -webkit-backdrop-filter: blur(6px) saturate(180%);

  /* 元々はグラデーションで #555 の変更だけでいいかもしれません */
  /* background: linear-gradient(180deg, transparent, #555); */
}

ありがとうございます。助かりました。

ついでに質問したいのですが人気記事の画像のサイズを正方形にして表示することは可能でしょうか。

@coco123 さん

可能です。ただ、正方形にする対象が人気記事だけか否かでやり方が異なります。

① 全ての一覧表示で正方形にする場合

Cocoon 設定 > 画像の「サムネイル画像」で「1:1（正方形）」を選択します。

参考：テーマ全体のサムネイル画像の縦横比（アスペクト比）を変更する方法

② 人気記事だけ正方形にする場合

子テーマの functions.php にコードを書きます。このコードの場合、人気記事の画像のサイズは 320x320 になります。

add_action( 'after_setup_theme', function() {
  add_image_size( 'square-cocoon-popular-entry-card', THUMB320WIDTH, THUMB320WIDTH, true );
});

add_filter( 'get_popular_entries_thumbnail_size', function( $thumb_size ) {
  $thumb_size = 'square-cocoon-popular-entry-card';
  return $thumb_size;
});

① でも ② でも設定後はプラグイン Regenerate Thumbnails で画像の再生成が必要です。

参考：テーマが利用しているサムネイルを再生成して最適化する方法（画像の大きさを揃える）

CSSを用い、人気記事のサムネイルを正方形(1:1)で表示させます。

.popular-entry-cards .card-thumb img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

CSS では不十分です。

Cocoon 設定 > 画像の「サムネイル画像」は、「正方形」以外は横長です。それを CSS で正方形にすると画像が荒くなります。

解決いたしました。この度は親切にありがとうございました！