Instagram Views: Example Code Usage

Documentation:

CSS:

.instagram-square { width: 200px; height: 200px; background-size: cover; background-position: center center; } .instagram-square-inner { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; width: 100%; height: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; background-color: rgba(86, 86, 90, 0.8); -webkit-transition: 0.6s; transition: 0.6s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .instagram-square-inner:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .instagram-square-caption { text-align: center; color: #fff; } .instagram-square-caption i { font-size: 26px; }

PHP:

<?php $insta_views = insta_views(); $insta_amount = 6; for ($i=0; $i < $insta_amount; $i++) { echo '<div class="instagram-square" style="background-image: url(' . $insta_views[$i]['thumbnail_src'] . ')"> <a target=" " href="http://instagram.com/p/' . $insta_views[$i]['code'] .'"> <div class="instagram-square-inner"><div class="instagram-square-caption"><i class="fa fa-instagram"></i></div></div> </a> </div>'; } ?>