JSFiddle - React, Tailwind, and code Playground

Flex Display Animated BG Angular BS4

by Andrew Pougher

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="container-fluid" ng-controller="MyCtrl">

<div class="homepage-item h-25 d-block"></div>
  <div class="col h-50">
    <div class="grid clearfix">
      <div ng-repeat="panel in folio | orderBy : 'id'  track by $index" class="grid-item animated" ng-class="[panel.class, panel.fx]" style="background: url('{{ panel.bg }}') no-repeat center / cover; ">
        <div class="p-1 align-content-start" style="position:absolute">
          <div class="text-light d-flex flex-wrap">
            <h1 class="m-0">{{panel.title}}</h1>
            <p class="small pr-2"> {{panel.desc}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="col tester">
    <div class="gallery grid clearfix h-25">
      <div class="grid-item dbl-height"></div>
      <div class="grid-item mrg-on-left"></div>
      <div class="grid-item mrg-on-left dbl-width"></div>
      <div class="grid-item mrg-on-left mrg-on-top dbl-width middle-one"></div>
      <div class="grid-item mrg-on-left mrg-on-top dbl-height"></div>
      <div class="grid-item dbl-width pull-up-one bot-one"></div>
      <div class="grid-item mrg-on-left pull-up-one bot-one"></div>
    </div>
  </div>


  <div class="row">
    <hr>
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div...

CSS

@import url("https://fonts.googleapis.com/css?family=Oswald:400,700|Poppins");
 body,
  html {
    font-family: 'Poppins', sans-serif;
    height: 100%
  }

  .grid {
    padding: 1px 0px;
  }

  .grid-item {
    padding-bottom: calc(((100% - 2px)/4));
    width: calc(((100% - 2px)/4));
    float: left;
    position: relative;
    overflow: hidden;
      -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
  }

  .grid-item.dbl-height {
    padding-bottom: calc(((100% - 2px)/4)*2);
  }

  .grid-item.dbl-height.right-one {
    padding-bottom: calc((((100% - 2px)/4)*2) - 1px);
  }

  .grid-item.dbl-width {
    width: calc(((100% - 2px)/4)*2);
  }

  .grid-item.mrg-on-left {
    margin-left: 1px;
  }

  .grid-item.mrg-on-top {
    margin-top: 1px;
  }

  .grid-item.middle-one {
    padding-bottom: calc(((100% - 2px)/4) - 1px);
  }

  .grid-item.pull-up-one {
    margin-top: calc(((100% - 2px)/(-4)));
  }

  .grid-item.bot-one {
    padding-bottom: calc(((100% - 2px)/4) - 1px);
  }

  .grid-item.bot-one:nth-last-child(2) {
    margin-bottom: 2px;
  }

  .grid-item.bot-one:nth-last-child(1) {
    max-width: 25%;
    border: 3px solid red;
  }
 .grid-item h1 {  font-family: 'Oswald', sans-serif;font-weight:400}
  .grid-item p,
  .grid-item h1 {
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  }

  @media (max-width: 500px) {
    .grid-item p {
      font-size: 60%
    }
    .grid-item h1 {
      font-size: 89%
    }
  }

  @media (max-width: 350px) {
    .grid-item p {
      display: none
    }
  }

  .tester .grid-item {
    background: rgba(127, 193, 255, 1);
    background: -moz-linear-gradient(-45deg, rgba(127, 193, 255, 1) 0%,...

JavaScript

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope, $timeout, $http, $interval) {


  $scope.numberLoaded = true; // enable slick if used 

  $scope.folio = [{
    "id": "1",
		"title": "Design",
    "desc":"Planning Web,Print, Ads and more.",
    "bg": "https://source.unsplash.com/300x1500/?mountain",
    "class": "dbl-height",
		"fx": "slideInUp"
  }, {
    "id": "2",
		"title": "Graphics",
		"desc":"Original creative visials to make an impact.",
    "bg": "https://source.unsplash.com/300x1500/?dog",
    "class": "mrg-on-left",
		"fx": "slideInDown"
  }, {
    "id": "3",
		"title": "Development",
	"desc":"Taking your web into a professianal level of management.",
    "bg": "https://source.unsplash.com/300x1500/?shoes",
    "class": "mrg-on-left dbl-width",
		"fx": "slideInLeft"
  }, {
    "id": "4",
	"title": "E-Commerce",
  		"desc":"Get your ideas monetized.",
    "bg": "https://source.unsplash.com/300x1500/?car",
    "class": "mrg-on-left mrg-on-top dbl-width middle-one",
		"fx": "zoomIn"
  }, {
    "id": "5",
		"title": "Product",
    		"desc":"From packaging to 3D design visualization.",
    "bg": "https://source.unsplash.com/300x1500/?love",
    "class": "mrg-on-left mrg-on-top dbl-height",
		"fx": "slideInRight"
  }, {
    "id": "6",
    	"title": "Hosting",
	"desc":"We\'ve done the groundwork to secure safe hosting.",
    "bg": "https://source.unsplash.com/300x1500/?love",
    "class": "dbl-width pull-up-one bot-one",
		"fx": "slideInLeft"
  }, {
    "id": "7",
    "title": "ID",
    		"desc":"Identity design to frame your business professionally.",
    "bg": "https://source.unsplash.com/300x1500/?sky",
    "class": "mrg-on-left pull-up-one bot-one ",
	"fx": "slideInUp"
  }];

  $scope.galleryOne = [
    "https://source.unsplash.com/600x200/?sea",
    "https://source.unsplash.com/600x200/?dogs",
    "https://source.unsplash.com/600x200/?love", "https://source.unsplash.com/600x200/?bikes"
  ];
  $scope.galleryTwo = [
   ...