<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="flex-grid featured-content"> <div class="grid-item"> <div class="grid-item-wrapper"> <div class="grid-item-bg-img" style="background-image:url('https://images.unsplash.com/photo-1484036218807-91efe1baff2f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f2ddcac446186aaf34590666d33e85a9&auto=format&fit=crop&w=1350&q=80')"></div> <div class="grid-item-content"> <div class="grid-item-content-details"> <h4 class="grid-title">Graphic Design</h4> <div class="grid-details">Graphic design is the process of visual communication and problem-solving using one or more of typography, photography and illustration to create visual compositions.</div> <div class="grid-action"> <div class="btn btn--clear">Read More</div> </div> </div> </div> </div> <div class="grid-item"> <div class="grid-item-wrapper"> <div class="grid-item-bg-img" style="background-image:url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a00dd14dd25d32b799b8e6e0270fd535&auto=format&fit=crop&w=1352&q=80')"></div> <div class="grid-item-content"> <div class="grid-item-content-details"> <h4 class="grid-title">Creative Design</h4> <div class="grid-details">Graphic design is the process of visual communication and problem-solving using one or more of typography, photography and illustration to create visual compositions.</div> <div class="grid-action"> <div class="btn btn--clear">Read More</div> </div> </div> </div> </div> <div class="grid-item"> <div class="grid-item-wrapper"> <div class="grid-item-bg-img" style="background-image:url('https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=08bcfbcc8c59a469f6a438a595886e4d&auto=format&fit=crop&w=1249&q=80')"></div> <div class="grid-item-content"> <div class="grid-item-content-details"> <h4 class="grid-title">Web Design</h4> <div class="grid-details">Graphic llustration to create visual compositions.</div> <div class="grid-action"> <div class="btn btn--clear">Read More</div> </div> </div> </div> </div> <div class="grid-item"> <div class="grid-item-wrapper"> <div class="grid-item-bg-img" style="background-image:url('https://images.unsplash.com/photo-1496674205429-924b32acd421?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c79e9fb8930b09f0c2885309718bf351&auto=format&fit=crop&w=1350&q=80')"></div> <div class="grid-item-content"> <div class="grid-item-content-details"> <h4 class="grid-title">Web Developement</h4> <div class="grid-details">Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain </div> </div> <div class="grid-action"> <div class="btn btn--clear">Read More</div> </div> </div> </div> </div> <div class="grid-item"> <div class="grid-item-wrapper"> <div class="grid-item-bg-img" style="background-image:url('https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-0.3.5&s=17460aa3d0fd3eb2fb7162edafc37175&auto=format&fit=crop&w=1350&q=80')"></div> <div class="grid-item-content"> <div class="grid-item-content-details"> <h4 class="grid-title">Logo Design</h4> <div class="grid-details">In the days of hot metalThe" in ATF Garamond, anot forming a wordAt the level of mass communication and in common usage, a company's logo is today often synonymous with its trademark or brand.</div> </div> <div class="grid-action"> <div class="btn btn--clear">Read More</div> </div> </div> </div> </div> <div class="grid-item"> <div class="grid-item-wrapper"> <div class="grid-item-bg-img" style="background-image:url('https://images.unsplash.com/photo-1497296805880-3b37686c87ea?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=77a435a281ee5b6fef8137e79a8a03d9&auto=format&fit=crop&w=1350&q=80')"></div> <div class="grid-item-content"> <div class="grid-item-content-details"> <h4 class="grid-title">UI & UX Design</h4> <div class="grid-details">User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.[1] User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users.</div> </div> <div class="grid-action"> <div class="btn btn--clear">Read More</div> </div> </div> </div> </div> </div>

.flex-grid { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: stretch; } .flex-grid .grid-item-wrapper { position: relative; width: 100%; height: 100%; } .flex-grid .grid-item { width: 100%; padding: 1rem; position: relative; } .flex-grid .grid-item h4 { margin-bottom: .5rem; margin-top: 0; font-weight: 400; } .flex-grid .grid-item-bg-img { position: relative; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; filter: sepia(0.3) saturate(0.8); -webkit-filter: sepia(0.3) saturate(0.8); } .flex-grid.featured-content .grid-item-wrapper { overflow: hidden; } .flex-grid.featured-content .grid-item-wrapper .grid-item-bg-img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .flex-grid.featured-content .grid-item-wrapper:hover .grid-item-bg-img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 4s cubic-bezier(0.39, 0.575, 0.565, 1); transition: transform 4s cubic-bezier(0.39, 0.575, 0.565, 1); } .flex-grid.featured-content .grid-item-wrapper .grid-item-content { -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; -ms-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; opacity: 0; } .flex-grid.featured-content .grid-item-wrapper:hover .grid-item-content { opacity: 1; -webkit-transition: opacity 0.6125s cubic-bezier(0.39, 0.575, 0.565, 1); -moz-transition: opacity 0.6125s cubic-bezier(0.39, 0.575, 0.565, 1); -ms-transition: opacity 0.6125s cubic-bezier(0.39, 0.575, 0.565, 1); -o-transition: opacity 0.6125s cubic-bezier(0.39, 0.575, 0.565, 1); transition: opacity 0.6125s cubic-bezier(0.39, 0.575, 0.565, 1); } .flex-grid.featured-content .grid-item { height: 50vh; padding: 0; position: relative; } .flex-grid.featured-content .grid-item-content { position: absolute; height: 100%; width: 100%; top: 0; left: 0; padding: .5rem .75rem; font-size: 1rem; font-weight: 300; /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); */ color: #fff; background: rgba(0, 0, 0, 0.5); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%); } .flex-grid.featured-content .grid-title { font-size: 1.5rem; } .flex-grid.featured-content .grid-item-content-details { height: 300px; overflow: hidden; margin: 5%; } .flex-grid.featured-content .grid-action { position: absolute; bottom: 0; left: 0; width: 100%; padding: .75rem; text-align: right; } .btn { background: #333; color: #fff; font-size: 1.2rem; padding: .75rem 1rem; text-transform: uppercase; text-shadow: none; position: relative; display: inline-block; cursor: pointer; -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; } .btn--clear { background: transparent; color: #fff; } .btn--clear:before { content: ' '; position: absolute; width: 100%; height: 100%; border: 3px solid #fff; top: 0; left: 0; } .btn--clear:hover { background: #FF5722; }