Summary Block List Hover

Hello! I'm trying to achieve something like this with a summary block for blog posts: https://www.michaelisboyd.com/projects/list

I've somewhat achieved it with CSS, but it's not a proper solution because if I increase the size of the images, or add more text to the titles, it makes everything unalign. 

Is there a way to edit the list style more freely so the titles are not spaced out according to the size of the featured image? 

One solution would be to disable the featured image on the editor, and make it appear on hover with CSS, but I can't seem to make that work... 

https://violin-halibut-2csa.squarespace.com/list

Password: mmmarchitects

This is the code I used (I know for a fact it is a messy one): 

/***SUMMARY LIST IMAGE APPEAR ON HOVER***/
@media screen and (min-width:800px){
#collection-651acafc0827d814c95c107e   .summary-item img {
    position: flex;
    visibility: hidden;}}
@media screen and (min-width:800px){
  #collection-651acafc0827d814c95c107e .summary-item:hover img {
    position: flex;
    visibility: visible;}}
@media screen and (max-width:800px){
 #collection-651acafc0827d814c95c107e  .summary-item img {
    visibility: hidden;}}

/***ALIGN SUMMARY TITLE TO LEFT***/
@media screen and (max-width:800px){ #collection-651acafc0827d814c95c107e .summary-content{
  position: relative;
  transform: translate(-50%, -50%);
}
 }

//Change width of Thumbnails//
#collection-651acafc0827d814c95c107e
.sqs-block-summary-v2 .summary-item-list {
   
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  
  }

@media screen and (min-width:800px){
#collection-651acafc0827d814c95c107e .sqs-block-summary-v2 {
.summary-item {
  margin-top: -40px !important;
  }}}
@media screen and (max-width:800px){
#collection-651acafc0827d814c95c107e
  .sqs-block-summary-v2 {
.summary-title {
  margin-top: -px !important;
  }}}

#collection-651acafc0827d814c95c107e
.sqs-block-summary-v2 {
.summary-title {
  margin-left: 70px !important;
  }}

@media screen and (min-width:800px){
#collection-651acafc0827d814c95c107e .sqs-block-summary-v2 {
.summary-excerpt {
  margin-top: -29.5px!important;
  }}}
@media screen and (min-width:800px){
#collection-651acafc0827d814c95c107e .sqs-block-summary-v2 {
.summary-excerpt {
  margin-left: 12px!important;
  }}}

@media screen and (max-width:800px){
#collection-651acafc0827d814c95c107e .sqs-block-summary-v2 {
.summary-excerpt {
  margin-top: -30px!important;
  }}}
@media screen and (min-width:800px){
#collection-651acafc0827d814c95c107e .summary-thumbnail-container{
  padding-right: 50px !important 
  }}
@media screen and (min-width:800px){
#collection-651acafc0827d814c95c107e .summary-thumbnail-container{
  padding-left: 32px !important 
  }}

@media screen and (min-width:800px){
#collection-651acafc0827d814c95c107e .sqs-block-summary-v2 .summary-item-list {
  width: 100%;
  
  }}

@media screen and (max-width:800px){
#collection-651acafc0827d814c95c107e .sqs-block-summary-v2 .summary-item-list {
  width: 200%;}}
 

Hi,

Can you take a screenshot of problem when you change image size? We can imagine easier

Ps I used to do this similar, but I used Text Block (1 text block only) + Some Images blocks (hide images block initial, then when users hover on each link on Text Block >> add a jQuery code .show to corresponding image >> then use CSS to set display: block for this .show class name)

Use this approach