Простой эффект, при наведении курсора на фото она затеняется #hovercss

№1. Фото с эфектом при hover

HTML
<div class="portfolio">
<img src="img/Athena.jpg" alt="">
 </div>
 CSS
 
 .portfolio{
margin: 0;
padding: 0;
position: relative;
}
.portfolio::after
{ 
content:  " " ;
width: 100%;
height:100%;
position: absolute;
display: block;
top: 0;
left: 0;
background: #000;
opacity:0;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;

}
.portfolio:hover::after {
	opacity:.55;
}