Reply To: I need this section CSS and JS

[Support]

Hello,

HTML:

<div class="row">
	<div class="col-sm-6 col-lg-3">
		<a href="#team-content-1" class="popup-with-zoom-anim text-decoration-none">
			<span class="thumb-info custom-thumb-info-1 thumb-info-no-borders">
				<span class="thumb-info-wrapper p-0">
					<img src="img/demos/finance/team/team-1.jpg" class="img-fluid" alt="">
				</span>
				<span class="thumb-info-caption bg-color-light">
					<span class="thumb-info-caption-text">
						<span class="thumb-info-caption-title text-uppercase text-color-dark font-weight-bold">John Doe</span>
						<p class="mb-0">CEO</p>
						<span class="custom-thumb-info-caption-plus bg-color-primary text-color-light">+</span>
					</span>
				</span>
			</span>
		</a>
		<div id="team-content-1" class="dialog dialog-lg zoom-anim-dialog mfp-hide p-5">
			<div class="row">
				<div class="col-lg-4 col-sm-4">
					<img src="img/demos/finance/team/team-1.jpg" class="img-fluid mb-4" alt="">
					<ul class="social-icons custom-social-icons text-center">
						<li class="social-icons-facebook">
							<a href="http://www.facebook.com/" target="_blank" title="Facebook">
								<i class="fab fa-facebook-f"></i>
							</a>
						</li>
						<li class="social-icons-twitter">
							<a href="http://www.twitter.com/" target="_blank" title="Twitter">
								<i class="fab fa-twitter"></i>
							</a>
						</li>
						<li class="social-icons-googleplus">
							<a href="http://www.plus.google.com/" target="_blank" title="Twitter">
								<i class="fab fa-google-plus-g" aria-hidden="true"></i>
							</a>
						</li>
						<li class="social-icons-linkedin">
							<a href="http://www.linkedin.com/" target="_blank" title="Linkedin">
								<i class="fab fa-linkedin-in"></i>
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-8 col-sm-8">
					<h2 class="font-weight-semibold text-color-dark mb-1">John Doe</h2>
					<p class="custom-font-style-1 font-weight-semibold">Founder of Porto</p>
					<p class="text-2 custom-line-height-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at elementum lacus. Fusce luctus urna ac mauris consequat, ac eleifend odio imperdiet. Sed euismod tempor orci, ullamcorper accumsan justo semper eu. Donec venenatis elit et euismod iaculis. Integer vehicula imperdiet metus at convallis. Donec ullamcorper at nunc lobortis ultricies. Nam tincidunt.</p>	
					<p class="text-2 custom-line-height-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet faucibus congue. Donec at volutpat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas risus dui.</p>
					<p class="text-2 custom-line-height-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque at purus et auctor. Donec eget risus vitae lacus aliquam porttitor. Morbi pellentesque fermentum ex, nec sagittis augue mollis sit amet. Pellentesque vitae metus porttitor ipsum finibus tincidunt. Praesent sit amet fringilla nisi, in porttitor eros. Vivamus iaculis mattis purus, vitae dictum felis tempor nec. Maecenas eget fermentum turpis. Fusce dignissim leo sit amet aliquet facilisis. Sed erat arcu, ultricies a justo vitae, elementum egestas justo. Nunc bibendum, ex id dapibus fringilla, nisl quam tincidunt ligula, at luctus quam magna nec sem. Suspendisse vitae tempus velit, nec congue sapien.</p>		
				</div>
			</div>
		</div>
	</div>
</div>

CSS:
(css/custom.css)

.custom-thumb-info-1 {
     overflow: visible;
     margin-bottom: 30px !important;
     transition: ease box-shadow 300ms;
}
 .custom-thumb-info-1:hover {
     box-shadow: 0px 0px 70px 0px rgba(139, 139, 139, 0.5);
}
 .custom-thumb-info-1:hover .thumb-info-wrapper:after {
     content: none;
}
 .custom-thumb-info-1:hover .thumb-info-caption {
     border-bottom: 0;
}
 .custom-thumb-info-1 .thumb-info-wrapper {
     transform: none;
}
 .custom-thumb-info-1 .thumb-info-caption {
     position: relative;
     display: block;
     padding: 0;
     border-bottom: 1px solid #e3e3e3 !important;
     transition: ease border-bottom 300ms;
}
 .custom-thumb-info-1 .thumb-info-caption .thumb-info-caption-text {
     padding: 30px 20px;
     margin: 0;
}
 .custom-thumb-info-1 .thumb-info-caption .thumb-info-caption-text p {
     padding: 0;
     font-size: 1em;
}
 .custom-thumb-info-1 .thumb-info-caption .thumb-info-caption-text .custom-thumb-info-caption-plus {
     position: absolute;
     top: 30px;
     right: 20px;
     border-radius: 100%;
     font-size: 2em;
     line-height: 0.76;
     width: 30px;
     height: 30px;
     font-weight: 100;
     text-align: center;
     padding-top: 7px;
}
 .custom-thumb-info-1.custom-rm-mb {
     margin-bottom: 0 !important;
}
 @media (max-width: 991px) {
     .custom-thumb-info-1.custom-rm-mb {
         margin-bottom: 30px !important;
    }
}
 .custom-thumb-info-1.custom-rm-mb-last {
     margin-bottom: 0 !important;
}

JS:

(function($) {

	'use strict';

	/*
	Dialog with CSS animation
	*/
	$('.popup-with-zoom-anim').magnificPopup({
		type: 'inline',

		fixedContentPos: false,
		fixedBgPos: true,

		overflowY: 'auto',

		closeBtnInside: true,
		preloader: false,

		midClick: true,
		removalDelay: 300,
		mainClass: 'my-mfp-zoom-in'
	});

}).apply(this, [jQuery]);

Best Regards,

Jonas

---