Cacher is the code snippet organizer for pro developers

HTML
<!--первый всплывающий блок портфолио  -->   
<div class="hidden">
 <div class="portfolio-popup">
<span class="container">
<span class="row">
<span class="col-md-6">
<img src="img/dron-vest.jpg" alt="адаптивого HTML-шаблона Дрон-Вест">
</span>
<span class="col-md-6">
<p>краткое описание адаптивого HTML-шаблона Дрон-Вест</p>
<ul>
  <li>тематика: создание сайтов на заказ</li>
  <li>состоит из 6 блоков</li>
  <li>галерея со всплывающими миниатюрами </li>
  <li>форма обратной связи с защитой от спама</li>
  <li>привязка к социальным сетям</li>
  <li>легко расширяемая</li>
</ul>
</span>
</span>
</span>
</div> <!--конец portfolio-popup -->
 </div>
<!--конец первого всплывающего блока портфолио  --> 

2 шаг
<link rel="stylesheet" href="libs/Magnific-Popup/magnific-popup.css" />

<script src="libs/Magnific-Popup/jquery.magnific-popup.min.js"></script>

3 шаг
CSS

/*оформление галереи работ*/ 

.portfolio{
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.portfolio img {

-o-transition:all 1.25s ease;
-webkit-transition:all 1.25s ease;
-moz-transition:all 1.25s ease;
transition:all 1.25s ease;
}


.portfolio-item
{
position: absolute;
top: 0;
left: 0;width: 100%;
height:100%;
text-align: center;
padding-top: 30%;
background-color: rgba(0, 0, 0, 0.60);
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
opacity:0;
-moz-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
-o-transition:all 1.25s ease;
-webkit-transition:all 1.25s ease;
-moz-transition:all 1.25s ease;
transition:all 1.25s ease;}


.portfolio-item:hover {
	opacity:1;
	-webkit-transform:scale(0.9);
	-moz-transform:scale(0.9);
	 transform:scale(0.9);
}
portfolio img:hover {
-moz-transform:scale(1.52);
-webkit-transform:scale(1.52);
transform:scale(1.52);

}
.portfolio-item a {  
color:rgb(255, 115, 110);
font-size:2.8em;
-o-transition:all 1.25s ease;
-webkit-transition:all 1.25s ease;
-moz-transition:all 1.25s ease;
transition:all 1.25s ease;

}
.portfolio-item a:hover { 
color:rgb(255, 255, 255); 
	-moz-transform: scale(1.4);
	transform: scale(1.4);
	text-shadow: 20px 0 30px rgb(255, 115, 110);
}

.portfolio-popup {
position:relative;
left: 0;
display: block;
width:70%;
text-align: center;
margin: 0 auto;
padding: 15px;
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid #fff;
box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.35);
}

.portfolio-popup img {
width:90%;
height:auto;
text-align: center;
}
.portfolio-popup p, .portfolio-popup ul{
color: #fff;
text-align: left;
font-size:1.6em;
font-variant: small-caps;
}
.portfolio-popup ul{
	margin: 0;
	list-style-type: none;
}
.portfolio-popup .mfp-close {
position: absolute;
right: 8%;
top: 18px;
}

.mfp-close-btn-in .mfp-close {
background-color: #fa4b15;
opacity: 1;
color: rgb(255, 255, 255);
font-weight: bold;
} 

.mfp-close-btn-in .mfp-close:hover {
opacity: 0.5;	
}

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',
});