верстка блока портфолио со сплывающим попапом с увеличенным изображением #css #html

1 вариант портфолио работ

HTML


  <!-- начало первого блока портфолио-->  
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <div class="portfolio">
      <img src="images/Freelance.jpg" alt="">  
      <div class="portfolio-block">
        <a href="#" class="portfolio-item"> <i class="fa fa-search-plus" aria-hidden="true"></i>
          <!--пытаюсь сделать всплывающее окно галеры -->  
          <div class="hidden">
            <div class="portfolio-popup">
              <span class="row">
                <span class="col-md-12">
                  <img src="images/Freelance.jpg" alt="">  
                  <h2>Тема Freelance подходит для людей, которые предоставляют услуги копирайтинга, рерайтинга, создания сайтов и так далее</h2>
                </span>
              </span>
            </div>
          </div>
        </a>
        &nbsp;&nbsp;
        <a href="#"> <i class="fa fa-link" aria-hidden="true"></i>
        </a>
      </div>
    </div>
  </div>
  <!-- конец первого блока портфолио-->  
  
 

js

// галерея всплывающая
$(".portfolio-item").each(function(e){
var th = $(this);
th.attr("href", "#portfolio-image-" + e)
.find(".portfolio-popup")
.attr("id", "portfolio-image-" + e);

});
$(".portfolio-item").magnificPopup({
mainClass: 'my-mfp-zoom-in',
removalDelay:300,
type:'inline',

});

style.css

 CSS
  
  /*начало портфолио  */

.portfolio 
 {
width: 90%;
overflow: hidden;
margin: : 0 auto; position: relative;

}

.portfolio img {

width: 90%;
height: auto;
margin: : 0 auto;

}
.portfolio-block{
	position: absolute;
	top: 0;
	left: 0;
	width: 90%; height: 100%;
	background-color: rgba(0, 0, 0, 0.500);

opacity: 0;
color: #fff;
padding-top: 30%;
text-align: center;
-webkit-transition: all 2.5s ease;
-moz-transition: all 2.5s ease;
transition: all 2.5s ease;

}
.portfolio-block:hover {
	opacity: 1;

}

.portfolio-block a {
	font-size: 1.5em;
	color: #fff;

-webkit-transition: background-color 0.5s ease, color 0.7s ease-out, box-shadow 0.5s ease;
-moz-transition: background-color 0.5s ease, color 0.7s ease-out, box-shadow 0.5s ease;
transition: background-color 0.5s ease, color 0.7s ease-out, box-shadow 0.5s ease;

}

.portfolio-block a:hover {
	color: #5eb6b6;

}
.portfolio-item {
position:relative;

font-size: 1.875em;
font-weight: 600;
text-shadow: 2px 15px 2px 15px #000;
line-height: 1.8;
color:rgb(0, 0, 0);
overflow:hidden;
}

.portfolio-popup {
	position:relative;
	background-color: #fff;
	display: block;
	text-align: center;
	max-width:910px;
	margin:5% auto;
	padding-top: 15px;
}
.portfolio-popup h2 {
	font-size: 1.000em;
	line-height: 1.6;
	margin:20px;
}
.portfolio-popup img {
	width:100%;
	height:auto;
}
.mfp-close-btn-in .mfp-close {
color: #000;
}