関連記事のデザインと新着投稿のデザインをこのように変更したいのですが…

3列にしたいということですか？

それもそうですし、画像の上にタイトルを表示させたり等も含めてです

後出しで仕様が変わると面倒くさいので、他に希望があれば全部箇条書きで良いので書いてください。
3列にするサンプルは既に何パターンかありまして、過去のトピックでもだいぶ同じようなことを答えてますので必ず何かしらヒットするはずですが、それはしていると希望すればそれでは足りない何かがあったと言うことかと思います。

一番重要な点として、対象を何(PC、タブレット、スマホ)にするかと、どうなれば正解かを明記してください。
特に対象をタブレットにする場合は範囲が広すぎるので、具体的に書いてもらえると助かります。ハイエンドなほぼPC表示と変わらないタブレットはひとまず無視するというのであればなお一層助かります。

「こういう時にはこうなる」「これとこれは不要」等。

画像の上にタイトルとありますが、画像にタイトルを重ねることかと思います。こういう表現は受け取り方によって意味がだいぶ変わるので、こういうものこそどこかのサイトでこうしたいというようなスクリーンショットを撮り、こうしたいと書いてもらえると助かります。

更に、タイトルが極端に長い場合、画像の範囲から溢れる可能性があります。溢れたものは非表示にはしますが、見た目がタイトルの長さによって変わるのが嫌なので、2行なら2行以下(1行あるいは2行という意味)に収めたいという人もいます。
このような部分も希望を書いてもらえる方が助かります。

基本的には全部cssでできますので、よほどのことがない限りjQuery等は使いませんが、希望される内容によってはjQuery等を使わざるを得ない場合があります。ここらも含めてこうしたいと思われる内容を書いてもらえると助かります。

最初の上の画像と全く同じ仕様にしたいんです。パソコン・スマホどちらもです。