"hover effect for blog"
Bootstrap 4.1.1 Snippet by ronnydodd

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style> .pad0 { padding:0px; } .bg_black{ background:#000; } .block-blog { width: 100%; height: auto; padding-top: 10px; padding-bottom: 10px; background-color: rgba(226, 223, 223, 0.61); } .transperent_block { padding: 0px; position: relative; overflow: hidden; height: 250px; } .transperent_block img { width:100%; height: 100%; } .transperent_block:hover .black_hover_block { opacity: 1; transform: translateY(-150px); -webkit-transform: translateY(-150px); -moz-transform: translateY(-150px); -ms-transform: translateY(-150px); -o-transform: translateY(-150px); } .transperent_block img { z-index: 4; } .transperent_block .black_hover_block { position: absolute; bottom: 3%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 100%; } .transperent_block:hover .black_hover_block, .black_hover_block:hover { bottom: 40%; transition: all 0.3s ease-in-out; } .transperent_block .blur { background-color: rgba(0,0,0,0.7); height: 500px; z-index: 5; position: absolute; width: 100%; } .transperent_block .black_hover_block_text { z-index: 10; color: #fff; position: absolute; height: 400px; text-align: center; top: -35px; width: 100%; background:black; } .block_header{ margin-top:5px;} .black_hover_block_text i:hover { color: #77132f; } .black_hover_block_text i { padding: 10px 10px; font-size: 18px; color: #fff; } .black_hover_block_text i:hover { color:#ffffffa6} .black_hover_block_text:hover .titl-h5 { background-color: rgba(119, 19, 47, 0.60); } .titl-h5 { border-top: 2px solid #77132f; border-bottom: 2px solid #77132f; padding: 10px; margin-top: 0px; line-height: 20px; text-transform:uppercase; } .btn-pink { background-color: #77132f; color: #fff; border: 4px solid #77132f; } .btn-pink:hover{ color: #fff; background-color: #6f0f2a9e; border: 4px solid #6f0f2a4e; } .btn-sm { margin-top: 10px; } .black_hover_block_text li:hover { background-color: #77132f; cursor: pointer; color: #fff; width: 33.34%; } .black_hover_block_text li { list-style: none; border: none !important; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container CourseContainer"> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="https://bowlinguniversity.net/Portals/21/MS212-Email%20Course%20Image.png" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Service Standards Introduction</h5> <p> You are new to the team and the boss says it is important to take great care of the guests and create a great guest experience! Sounds great, but what does that really mean, and more importantly how do you even do that? This course will start to answer those questions for you and set you up for success in your new position! <br> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="https://bowlinguniversity.net/Portals/21/MS212-Email%20Course%20Image.png" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Service Standards START</h5> <p> <em>Recommended Prerequisite Courses: Customer Service – Introduction to Service Standards</em><br> <br> <strong>START</strong> is a trainable, easy to execute set of service standards that are ready for your team to embrace. Providing a great guest experience starts with defining what your service standards are, and the <strong>START</strong> program provides you an option to utilize. <br> <strong>Approximate time: 25 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="https://bowlinguniversity.net/Portals/21/MS212-Email%20Course%20Image.png" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Service Standards Zingerman’s</h5> <p> <em>Recommended Prerequisite Courses: Customer Service – Introduction to Service Standards</em><br> <br> What started out as a corner deli with great food, Zingerman’s name has become synonymous with providing an incredible guest experience. Learn Zingerman’s service standards that include 3 steps to great service and 5 steps to effectively handling guest complaints. <br> <strong>Approximate time: 25 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="https://bowlinguniversity.net/Portals/21/MS212-Email%20Course%20Image.png" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Creating Mission, Vision, & Values for Leaders</h5> <p> Once a process reserved for larger companies, today ANYONE that leads a group of any size needs to understand what company culture is and how it impacts every aspect of the group you lead. Learn the importance of and how to develop the Mission, Vision, and Values for your team. <br> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="https://bowlinguniversity.net/Portals/21/MS212-Email%20Course%20Image.png" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Developing Service Standards for Leaders</h5> <p> Everyone knows what great customer service looks like, we know it when we see it, but how do you define it? Most organizations that stumble with customer service have not been able to define what acceptable customer service looks like for their business. This course not only helps you define the new customer service but guides you in how to turn that definition into standards. <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="https://bowlinguniversity.net/Portals/21/MS212-Email%20Course%20Image.png" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Executing Service Standards for Leaders</h5> <p> <em>Recommended Prerequisite Courses: Creating Mission, Vision, & Values for Leaders and Customer Service-Developing Service Standards for Leaders</em><br> You have developed your Service Standards for your business and defined what the guest experience will look like. Now it is time to teach them and bring them to life with the team. This course will share some different training styles for your consideration and discuss how to engage new as well as existing team members to execute your Service Standards day in and day out. <br> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="https://bowlinguniversity.net/Portals/21/MS212-Email%20Course%20Image.png" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Measuring Service Standards for Leaders</h5> <p> <em>Recommended Prerequisite Courses: Creating Mission, Vision, & Values for Leaders, Customer Service-Developing Service Standards for Leaders and Customer Service Executing Service Standards for Leaders</em><br> In business, what gets measured gets managed! Now that you have developed and trained your team members to your service standards, how do you know they are being followed? No news is good news is NOT the strategy of choice. This course will discuss how to measure the guest experience as well as understanding why recognizing team members for delivering great guest service matters. <br> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="https://bowlinguniversity.net/Portals/21/MS212-Email%20Course%20Image.png" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Service Standards START</h5> <p> <em>Recommended Prerequisite Courses: Customer Service – Introduction to Service Standards</em><br> <br> <strong>START</strong> is a trainable, easy to execute set of service standards that are ready for your team to embrace. Providing a great guest experience starts with defining what your service standards are, and the <strong>START</strong> program provides you an option to utilize. <br> <strong>Approximate time: 25 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="https://bowlinguniversity.net/Portals/21/MS212-Email%20Course%20Image.png" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Online Virtual</h5> <p> Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor... </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> </div>

Related: See More


Questions / Comments: