Help. Basic question about code

Site URL: https://www.nickdavid.co.uk/worknew

Hi, I am having some issues figuring out why my code is not actively working on my site. 

It shows up in the CSS preview as working, but when I exit, non of the changes have taken place.

I have tried putting !important on several code to try and force it to work, and I checked if there was any mistype error code.

The only reason I can see now is that I have not named something properly. I am currently using Summary: Wall to feature all the images.  I am trying to have text hover in middle, with gray hover over gradient and white background for the lightbox pop up. 

Please let me know if anyone has a an easy answer to why this is not working. 

Attached is the code and above is the page I am working on

/* display title on hover*/ 
  .sqs-block-summary-v2 .summary-item .summary-title 
  a{ 
  background-color: transparent!important; 
  opacity: 0 !important; 
  color: #fff!important; 
    position: absolute!important;
     left: 0!important;
     right: 0!important;
     top: 40%!important;
     margin-left: auto!important;
      margin-right: auto!important;
  }

  .sqs-block-summary-v2 .summary-item:hover .summary-title 
  a{ 
  background-color: transparent!important; 
  opacity: 4!important; 
  color: #000000!important; 
     position: absolute!important;
     display: block!important;
   text-align: center!important;
 
  }
/*style title font hover for summary wall block*/
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: europa !important; 
font-weight: 600 !important;
font-size: 20px !important;
color: #33cccc !important;


@media (max-width: 640px);
  font-size: 18px !important;
;

 } 
}
/*eliminates white space between thumbnails*/
.summary-thumbnail-container,
.summary-title {
margin-bottom: 0 !important;
}





.sqs-lightbox-meta{
 display: none!important;
}


.yui3-lightbox2 .sqs-lightbox-slideshow
{
background-color: 
  white !important;
 opacity: 1 !important;
}

Your CSS wasn't formatted correctly. Check how this applies. I wasn't entirely sure how much of the code you were trying to put in the media query so I just put the font-size in there.

/* display title on hover*/ 
.sqs-block-summary-v2 .summary-item .summary-title a { 
    background-color: transparent!important; 
    opacity: 0 !important; 
    color: #fff !important; 
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 40% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.sqs-block-summary-v2 .summary-item:hover .summary-title a { 
    background-color: transparent !important; 
    opacity: 4 !important; 
    color: #000000 !important; 
    position: absolute !important;
    display: block !important;
    text-align: center !important;
}

/*style title font hover for summary wall block*/
.sqs-block-summary-v2,
.summary-title,
.summary-heading {
    font-family: europa !important; 
    font-weight: 600 !important;
    font-size: 20px !important;
    color: #33cccc !important;
}

@media (max-width: 640px) {
    .sqs-block-summary-v2,
    .summary-title,
    .summary-heading {
        font-size: 18px !important;
    }
} 

/*eliminates white space between thumbnails*/
.summary-thumbnail-container,
.summary-title {
    margin-bottom: 0 !important;
}

.sqs-lightbox-meta{
    display: none !important;
}

.yui3-lightbox2 .sqs-lightbox-slideshow {
    background-color: 
    white !important;
    opacity: 1 !important;
}

loueeze

Thank you, it seems to work perfectly now. I will go trough this and learn from you so it dont happen again, and knowing what to look for. Your kindness has done a lot today!