Zasłonienie obrazka i wyświetlenie przycisku :hover css

Witam,
a mianowicie chciałbym zrobić taki efekt na stronie, że po najechaniu loga strony obrazek przysłania się lekko prześwitującym kolorem, i wyświetla się przycisk button z napisem Odśwież centralnie w środku obrazka. Wszystko ładnie, świetnie, umiem zrobić większość, oprócz tego, żeby się przysłoniło i żeby się wyświetlił button na środku tego obrazka. Szukałem w necie, ale nie znalazłem.

Byłbym wdzięczny za pomoc.
KrisKros

        <section class="gallery" id="gallery">
            <a href="img/01.png" style="background-image:url('img/01.png');" data-type="image"></a>
            <a href="img/02.png" style="background-image:url('img/02.png');" data-type="image"></a>
            <a href="img/03.png" style="background-image:url('img/03.png');" data-type="image"></a>
            <a href="img/04.png" style="background-image:url('img/04.png');" data-type="image"></a>
            <a href="img/05.png" style="background-image:url('img/05.png');" data-type="image"></a>
            <a href="img/06.png" style="background-image:url('img/06.png');" data-type="image"></a>
            <a href="img/07.png" style="background-image:url('img/07.png');" data-type="image"></a>
            <a href="img/08.png" style="background-image:url('img/08.png');" data-type="image"></a>
        </section>

.gallery > A {
  display:block;
  /* flex */
  -ms-flex:0 0 100%;
  -webkit-box-flex:0 0 100%;
  -webkit-flex:0 0 100%;
   flex:0 0 100%;
  /* /flex */
  height:100vw;
  position:relative;
  background-size:cover;
  background-position:center center;
  overflow:hidden;
}
.gallery > A::before, .gallery > A::after {
  position:absolute;
  -ms-transition:all 0.3s ease 0s; 
  -webkit-transition:all 0.3s ease 0s; 
  -moz-transition:all 0.3s ease 0s; 
  transition:all 0.3s ease 0s; 
}


.gallery > A::before  {
  content:"";
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:white;
  opacity:0;
}

.gallery > A:hover::before  {
  opacity:0.7;
}

.gallery > A::after {
  content:"zobacz";
  /* display */
  display: -ms-flex;
  display: -webkit-box-flex;
  display: -webkit-flex;
  display:flex;
  /* /display */
  /* centruj w poziomie */
  -ms-flex-pack:center;
  -webkit-justify-content:center;
  justify-content:center;
  /* /centruj w poziomie */
  /* centruj w pionie */
  -ms-flex-align:center;
  -webkit-align-items:center;
  align-items:center;
  /* centruj w pionie */
  top:100%;
  left:calc(50% - 75px);
  width:150px;
  height:80px;
  border:3px solid black;  
  color:black;
  text-align:center;
  vertical-align:middle;
  font-size:16px;
}

.gallery > A:hover::after {
  top:calc(50% - 40px);  
}