"ServicesCards"
Bootstrap 4.1.1 Snippet by vourinen

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="container"> <div class="card"> <div class="image"> <img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fih1.redbubble.net%2Fimage.105503772.4267%2Fra%2Cunisex_tshirt%2Cx2200%2Cheather_grey%2Cfront-c%2C392%2C146%2C750%2C1000-bg%2Cf8f8f8.2u13.jpg&f=1"/> </div> <div class="details"> <div class="center"> <h1>Data Scientist Workbench<br><span></span></h1> <div class="yellow-border"></div> <p>Isolated environment for analytics development, including analytics toolset, data processing and data storage</p> <ul> <h1>Sandbox<br><span></span></h1> <div class="grey-border"></div> <p>• Purpose is to try out Data Lake capabilities</p> <p>• Access is not restricted => anyone can access and use the same workspace an data</p> <p>• Includes only public data</p> <li><button class="btn btn-warning">GET ACCESS TO THE SANDBOX</button></i></a></li> <br> <br> <h1>Full Bench<br><span></span></h1> <p>• Purpose is to try out Data Lake capabilities</p> <p>• Access is not restricted => anyone can access and use the same workspace an data</p> <p>• Includes only public data</p> <li><button class="btn btn-warning">CONTACT US</button></i></a></li> </ul> </div> </div> </div> </div>
body { margin: 0; padding: 0; background: #250008; font-family: sans-serif; } .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 500px; background: #000; } p { text-align:left; margin-left:10px; } .btn btn-warning { padding:20px; margin:20px auto; text-align:center; } .yellow-border{ background-color: #808080; box-sizing: border-box; height: 0px; width: 77px; border-bottom: 2px solid rgb(255,204,0); } .grey-border { background-color: #808080; box-sizing: border-box; height: 0px; width: 77px; border-bottom: 2px solid rgb(236,236,236); } .card .image { width: 100%; height: 900px%; overflow: hidden; } .card .image img { width: 100%; transition: .5s; } .card:hover .image img { opacity: .5; transform: translateX(30%);/*100%*/ } .card .details { position: absolute; top: 0; left: 0; width: 70%;/*100%*/ height: 100%; background: #ffc107; transition: .5s; transform-origin: left; transform: perspective(2000px) rotateY(-90deg); } .card:hover .details { transform: perspective(2000px) rotateY(0deg); } .card .details .center { padding: 20px; text-align: center; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); } .card .details .center h1 { margin-top:40px; margin-bottom:2px; padding: 0; color: #323232; line-height: 20px; font-size: 20px; text-align: left; text-transform: uppercase; } .card .details .center p { margin-left:10px; margin-top:10px; padding: 0; color: #262626; } .card .details .center ul { margin: 10px auto 0; padding: 0; display: table; } .card .details .center ul li { list-style: none; margin: 0 5px; float: left; }

Related: See More


Questions / Comments: