Hover Image Border

Hi,
I've had a few issues getting a gallery to work how I intend it to.
I want an 0.6 opacity on the thumbnails and when I hover over it 1.0 opacity
when I click it should open a light box

So ... I manged to get a 0.6 opacity by clicking on the image on the post and selecting the image icon and selecting 0.6 opacity. That works great.

But when I hover over the image I don't know how to edit the css.
Do I have to add the additional css to the css tab...
If so that's also a bit confusing, I would assume something on the lines of

.ngg-gallery-thumbnail:hover {
opacity: 1.0;
border-color: rgba(0, 0, 255, 0);;
}

Oh yes theres also this grey border that appears when I hover over the image.

Then the lightbox, I removed the following code from the css tab because I kept getting 2 light box, ie one ontop of the other.

------------------------------------previous code for reference -----------------------------------------------------------
.gallery-item .overlay
{
background-color: rgba(211, 69, 84, 0.35);
background-image: url("/wp-content/uploads/2014/12/zoom.png");
width:100%;
background-position: center 40%;
background-repeat: no-repeat;
bottom: 0;
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.25s ease-in-out 0s;
}
.gallery-item:hover .overlay
{
opacity: 1;
}
.gallery-item .overlay-meta
{
bottom: 20px;
left: 20px;
position: absolute;
}
.gallery-item .overlay-meta h3
{
color: #fff;
font-size: 1.4em;
font-weight: normal;
margin-bottom: 0;
}
.gallery-item .overlay-meta .caption
{
color: #fff;
font-size: 1.6em;
font-style: italic;
line-height: 28px;
}
------------------------------------ end previous code for reference -----------------------------------------------------------

So now I'm just getting one lightbox but it is really close to the bottom of the page.
Also I can't see my footer,
I assume not being able to see the footer is related

Thanks for your help !!!