CSS - Overlay action

Question

Friends I am not very good with CSS or HTML, but I can manage with some things. I am creating my site (https://girundi.com/) just that they need a help:

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

Someone knows how I do?

Answer 1

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

Take 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>