Update blog cards template as interactive with hover

[ifhammohamed]

Purpose

The purpose of this PR is to fix #1591

Goals

• Solve the images appear stretched
• Enhance the interactivity of the blog posts card

Approach

• improved the image style using object-fit , overflow and, img-thumbnail
• enhance the interactivity by hover effect

Screenshots

issue.1591.fixed.mp4

Preview Link

https://pr-1623-sef-site.surge.sh/

Checklist

• I have read and understood the development best practices guidelines
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I created a fork from the master branch and made my changes in to that same master branch
• My pull request is sent to the correct base branch in the original repo
• I have linked the issue I worked on to this pull request submitted by me
• File(s) or folder(s) now contain changes as specified in the issue i worked on
• I certify that I ran my checklist.

Related PRs

Learning

[ifhammohamed]

Hi @anjula-sack This PR is ready for review.

[YoshithaRathnayake]

Cool!, good for me @ifhammohamed1111
How about @anjula-sack ?

[anjula-sack]

Loos good! @ifhammohamed1111 Can you drop a comment on the issue? Usually you have to get assigned for an issue and then you send a PR