Затемнение картинки при наведении

by pharma_nsk

HTML

<div class="projects">
<ul class="mainlinks vertical v4">
      <li><a><span>мой текст </span></a></li>
      <li><a><span>мой баннер 2</span></a></li>
</ul>
</div>

CSS

ul.mainlinks.vertical.v4 {
	list-style-image: none;	
}
.mainlinks.vertical.v4 li {
	height: 200px;
	width: 200px;
	border: 2px dashed blue;
	display:block;
  background: url("http://mamamidetkam.ru/uploads/fotos/foto_918.jpg") no-repeat 50% 50%;
  }
  
 .mainlinks.vertical.v4 li a {
   height: 200px;
	width: 200px;
	display:block;
  color: #000;
	font: 11px Arial;
	line-height:200px;
 text-align:center;
 border: 1px solid green;
}
 .mainlinks.vertical.v4 li a span {
   position:relative;
   top:60px;
 }

.mainlinks.vertical.v4 li a:hover{
	/*height: 86px !important;	*/
	font-weight: bold;	
  font-size:16px;
	color: white;
  background: rgba(0,0,0,0.2);
   cursor: pointer;
  transition: 0.3s;
}