Fancy hover grid - code helper

xxxxxxxxxx
 
<div class="wrapper pb-5">
    <br>
    <div class="container">
        <div class="row">
            <!-- row one, item 1 -->
            <div class="col-lg-4 item-wrapper">
                <div>
                    <a class="ext-link" href="https://mdbootstrap.com/products/jquery-ui-kit/" target="_blank">
                        <div>
                            <h2 class="title">jQuery</h2>
                            <p class="subtitle">MDB UI Kit</p>
                            <div class="description">
                                <p>Save huge amounts of time on website/application creation using our predefined
                                    sections and templates.</p>
                            </div>
                        </div>
                    </a>
                </div>
                
            </div>
            <!-- row one, item 2 -->
            <div class="col-lg-4 item-wrapper">
                <div>
                    <a class="ext-link" href="https://mdbootstrap.com/products/angular-ui-kit/" target="_blank">
                        <div>
                            <h2 class="title">Angular</h2>
                            <p class="subtitle">MDB UI Kit</p>
                            <div class="description">
                                <p>All you have to know about the newest Angular and Bootstrap in one place. We've
                                    described all components as detailed as it can be, but if you suffer from lack of
                                    any information - let us know!</p>
                            </div>
                        </div>
                    </a>
                </div>
                
            </div>
            <!-- row one, item 3 -->
            <div class="col-lg-4 item-wrapper">
                <div>
                    <a class="ext-link" href="https://mdbootstrap.com/products/react-ui-kit/" target="_blank">
                        <div>
                            <h2 class="title">React</h2>
                            <p class="subtitle">MDB UI Kit</p>
                            <div class="description">
                                <p>With the Premium Support all your issues will be treated as a priority and our team
                                    will make their fullest efforts to help you with any questions related to MDB.
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                
            </div>
        </div>
        <div class="row">
            <!-- row two, item 1 -->
            <div class="col-lg-4 item-wrapper">
                <div>
                    <a class="ext-link" href="https://mdbootstrap.com/products/vue-ui-kit/" target="_blank">
                        <div>
                            <h2 class="title">Vue</h2>
                            <p class="subtitle">MDB UI Kit</p>
                            <div class="description">
                                <p>To save time we have combined our components and prepared thematic sections like
                                    blog listings, contact forms, pricing tables and much more. </p>
                            </div>
                        </div>
                    </a>
                </div>
                
            </div>
            <!-- row two, item 2 -->
            <div class="col-lg-4 item-wrapper">
                <div>
                    <a class="ext-link" href="https://mdbootstrap.com/education/javascript/" target="_blank">
                        <div>
                            <h2 class="title">JavaScript</h2>
                            <p class="subtitle">MDB Tutorial</p>
                            <div class="description">
                                <p>Together with HTML and CSS, JavaScript is an absolute foundation in both web design
                                    and web development. The entire Internet is built with JavaScript.</p>
                            </div>
                        </div>
                    </a>
                </div>
                
            </div>
            <!-- row two, item 3 -->
            <div class="col-lg-4 item-wrapper">
                <div>
                    <a class="ext-link" href="https://mdbootstrap.com/education/html/" target="_blank">
                        <div>
                            <h2 class="title">HTML</h2>
                            <p class="subtitle">MDB Tutorial</p>
                            <div class="description">
                                <p>This tutorial is intended for people who want to learn the basics of creating
                                    websites and applications.</p>
                            </div>
                        </div>
                    </a>
                </div>
                
            </div>
        </div>
    </div>
</div>

xxxxxxxxxx
 
a.ext-link {
  position: relative;
  height: 100%;
  text-decoration: none;
  color: #f8f9fa;
  cursor: pointer;
}
​
a.ext-link > div {
  position: relative;
  height: 100%;
  padding: 1rem 0;
}
​
.title {
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1;
  opacity: 1;
  position: relative;
}
​
.subtitle {
  color: #ced4da;
  font-size: .9rem;
  letter-spacing: .035rem;
  line-height: 1.125;
  margin: -.25rem 0 0;
  opacity: 0;
}
​
.wrapper .row {
  flex-wrap: nowrap;
  justify-content: center;
  overflow: hidden;
}
.wrapper .row > div {
  height: 240px;
  overflow: hidden;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.wrapper .row > div:before {
  background: rgba(33, 37, 41, 0.7);
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.wrapper .row:hover > div {
  flex-basis: calc(100% * 1/6);
  flex-basis: 16.66%;
  max-width: calc(100% * 1/6);
  max-width: 16.66%;
}
.wrapper .row .item-wrapper {
  flex-basis: calc(100% * 1/3);
  flex-basis: 33.33%;
  max-width: calc(100% * 1/3);
  max-width: 33.33%;
}
.wrapper .row .item-wrapper > div {
  height: 100%;
  position: relative;
}
.wrapper .row .item-wrapper > a > div {
  position: relative;
  height: 100%;
  padding: 1rem 0;
}
.wrapper .row .item-wrapper .description p {
  width: calc(100% * 2/3);
  margin-top: 0;
  margin-bottom: 0;
  padding: 1rem 0;
  opacity: 0;
}
.wrapper .row .item-wrapper .category-icon {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: auto;
  font-size: 0.79rem;
  color: #0DAFE0;
  display: flex;
  align-items: center;
  padding: .35rem;
  opacity: .7;
  filter: grayscale(50%);
}
.wrapper .row .item-wrapper .category-icon:after {
  content: '';
  display: block;
  margin-left: .5rem;
  background-repeat: no-repeat;
  -webkit-mask-image: url(https://mdbootstrap.com/img/Marketing/general/logo/small/mdb.png);
  mask-image: url(https://mdbootstrap.com/img/Marketing/general/logo/small/mdb.png);
  background-color: #0DAFE0;
  height: 20px;
  width: 21px;
}
.wrapper .row .item-wrapper:hover {
  flex-basis: calc(100% * 2/3);
  flex-basis: 66.66%;
  max-width: calc(100% * 2/3);
  max-width: 66.66%;
}
.wrapper .row .item-wrapper:hover .title {
  font-size: 1.953rem;
  color: #212529;
  text-shadow: none;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease;
}
.wrapper .row .item-wrapper:hover .subtitle {
  opacity: 1;
  color: #495057;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.wrapper .row .item-wrapper:hover .category-icon {
  opacity: 1;
  filter: grayscale(0%);
}
.wrapper .row .item-wrapper:hover .description p {
  opacity: 1;
  color: #212529;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.wrapper .row .item-wrapper:hover:before {
  background: rgba(248, 249, 250, 0.8) !important;
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
​
.container .row h4:first-of-type {
  text-align: center;
  margin: 0 auto;
  padding-bottom: 1rem;
}
​
.wrapper .row:first-child > :nth-child(1){
  background-color: #515272;
  background-image: url("https://mdbootstrap.com/img/Marketing/general/jquery-presentation-wide.png");
  background-position: center center;
  background-size: cover;
}
.wrapper .row:first-child > :nth-child(2){
  background-color: #6c3f31;
  background-image: url("https://mdbootstrap.com/img/Marketing/general/angular-presentation-wide.png");
  background-position: center center;
  background-size: cover;
}
.wrapper .row:first-child > :nth-child(3){
  background-color: #323119;
  background-image: url("https://mdbootstrap.com/img/Marketing/general/react-presentation-wide.png");
  background-position: center center;
  background-size: cover;
}
.wrapper .row:last-child > :nth-child(1){
  background-color: #5d92cb;
  background-image: url("https://mdbootstrap.com/img/Marketing/general/vue-presentation-wide.png");
  background-position: center center;
  background-size: cover;
}
.wrapper .row:last-child > :nth-child(2){
  background: #e9ecef;
  background-image: url("https://mdbootstrap.com/img/Marketing/tutorials/jquery/js.jpg");
  background-position: center center;
  background-size: cover;
}
.wrapper .row:last-child > :nth-child(3){
  background-color: #112a3b;
  background-image: url("https://mdbootstrap.com/img/Marketing/tutorials/jquery/html.jpg");
  background-position: center center;
  background-size: cover;
}
​

​

Console errors: 0