CSS-Overlay Action

Friends I am don't understand much of CSS or HTML, but I can turn around with a few things. I am creating my website ( https://girundi.com/) only this needs a help:

As I created in cargocollective the template is ready, so I modified some things. Only I wanted to put in each image the overlay function - that is, when you hover the mouse under it, the name of the project appears and it becomes darker. The idea is the same as this site here ( http://www.brunooppido.com/).

Anyone know how I do it?

Author: hugocsl, 2018-01-18
Source

1 answers

Follows a very simple model. I preferred to do this simpler way with the separate elements just to you better understand how the effect works. But it is also possible to do using pseudo elements, attrs etc.

A look at the model below that I think will suit you. (be sure to study the Code) 

.container {
  position: relative;
  width: 200px;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000;
}
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background-color: #000;
  padding: 6px 10px;
  opacity: 0;
  transition: .5s ease;
}
.container:hover .overlay {
  opacity: 0.5;
}
.container:hover .text {
  opacity: 1;
  cursor: pointer;
}
.text a, a:visited, a:hover {
    color: white;
    text-decoration: none;
}
<div class="container">
  <img src="http://placecage.com/200/200" alt=" " class="image">
  <div class="overlay"></div>
  <div class="text"><a href="#">Nome do Projeto</a></div>
</div>
 0
Author: hugocsl, 2018-01-18 10:29:50