<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 ---------->
<div class="et_builder_inner_content et_pb_gutters3"><div class="et_pb_section et_pb_section_0 et_section_regular">
<div class="et_pb_row et_pb_row_0">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_module et_pb_code et_pb_code_0">
<div class="et_pb_code_inner">
<style type="text/css">
.item-category {
width: inherit;
height: 300px;
-webkit-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: perspective(1000px);
-ms-transform: perspective(1000px);
transform: perspective(1000px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.info-item-category {
/* border: 1px solid #999;*/
transform: rotateY(0deg);
transform-style: preserve-3d;
position: relative;
background-size: cover;
background-position: center center;
transition: transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
-webkit-transition: -webkit-transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
overflow: hidden;
top: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width: 100%;
height: 100%;
display: flex;
display: -ms-flex;
display: -webkit-flex;
-webkit-box-align: center;
align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
margin-bottom: 30px;
}
.info-item-category .et_pb_blurb_content{
text-align: center;
position: absolute;
top: 50px;
left: 50px;
bottom: 50px;
right: 50px;
/* background-color: rgba(0, 0, 0, 0.8);*/
padding: 10px 20px;
-webkit-transform: translateX(0px);
transform: translateX(0px);
transition: transform 0.90s cubic-bezier(0.3,0.3,0.3,1);
-webkit-transition: -webkit-transform 0.90s cubic-bezier(0.3,0.3,0.3,1);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
justify-content: center;
-ms-justify-content: center;
-webkit-justify-content: center;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
display: flex;
display: -ms-flex;
display: -webkit-flex;
}
.info-item-category.under {
transform: rotateY(180deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
background-size: cover;
background-position: center center;
-webkit-transition: -webkit-transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
transition: transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
overflow: hidden;
position: absolute;
top: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.info-item-category.under .et_pb_blurb_content{
background-color: rgba(255,255,255,0.9);
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
transform: translateX(50%);
-webkit-transform: -webkit-translateX(50%);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.item-category:hover .info-item-category {
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.item-category:hover .info-item-category.under {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.item-category:hover .info-item-category.under .et_pb_blurb_content{
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
</style>
</div> <!-- .et_pb_code_inner -->
</div> <!-- .et_pb_code -->
</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row --><div class="et_pb_row et_pb_row_1">
<div class="et_pb_column et_pb_column_1_3 et_pb_column_1 item-category et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_blurb et_pb_blurb_0 info-item-category et_pb_bg_layout_dark et_pb_text_align_center et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><span class="et_pb_image_wrap"><span class="et-pb-icon et-waypoint et_pb_animation_top et-animated"></span></span></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header">Clean UI/UX</h4>
<div class="et_pb_blurb_description">
</div><!-- .et_pb_blurb_description -->
</div>
</div> <!-- .et_pb_blurb_content -->
</div> <!-- .et_pb_blurb --><div class="et_pb_module et_pb_blurb et_pb_blurb_1 info-item-category under et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header">Clean UI/UX</h4>
<div class="et_pb_blurb_description">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
</div><!-- .et_pb_blurb_description -->
</div>
</div> <!-- .et_pb_blurb_content -->
</div> <!-- .et_pb_blurb -->
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_3 et_pb_column_2 item-category et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_blurb et_pb_blurb_2 info-item-category et_pb_bg_layout_dark et_pb_text_align_center et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><span class="et_pb_image_wrap"><span class="et-pb-icon et-waypoint et_pb_animation_top et-animated"></span></span></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header">Responsive Design</h4>
<div class="et_pb_blurb_description">
</div><!-- .et_pb_blurb_description -->
</div>
</div> <!-- .et_pb_blurb_content -->
</div> <!-- .et_pb_blurb --><div class="et_pb_module et_pb_blurb et_pb_blurb_3 info-item-category under et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header">Responsive Design</h4>
<div class="et_pb_blurb_description">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
</div><!-- .et_pb_blurb_description -->
</div>
</div> <!-- .et_pb_blurb_content -->
</div> <!-- .et_pb_blurb -->
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_3 et_pb_column_3 item-category et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_blurb et_pb_blurb_4 info-item-category et_pb_bg_layout_dark et_pb_text_align_center et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><span class="et_pb_image_wrap"><span class="et-pb-icon et-waypoint et_pb_animation_top et-animated"></span></span></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header">24/7 Support</h4>
<div class="et_pb_blurb_description">
</div><!-- .et_pb_blurb_description -->
</div>
</div> <!-- .et_pb_blurb_content -->
</div> <!-- .et_pb_blurb --><div class="et_pb_module et_pb_blurb et_pb_blurb_5 info-item-category under et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header">24/7 Support</h4>
<div class="et_pb_blurb_description">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
</div><!-- .et_pb_blurb_description -->
</div>
</div> <!-- .et_pb_blurb_content -->
</div> <!-- .et_pb_blurb -->
</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row -->
</div> <!-- .et_pb_section --> </div>
.et_pb_blurb_0.et_pb_blurb {
background-image: linear-gradient(90deg,#2b87da 0%,#29c4a9 100%);
}
.info-item-category {
/* border: 1px solid #999; */
transform: rotateY(0deg);
transform-style: preserve-3d;
position: relative;
background-size: cover;
background-position: center center;
transition: transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
-webkit-transition: -webkit-transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
overflow: hidden;
top: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width: 100%;
height: 100%;
display: flex;
display: -ms-flex;
display: -webkit-flex;
-webkit-box-align: center;
align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
margin-bottom: 30px;
}
.et_pb_blurb_0 {
box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.3);
}
.et_pb_module {
-webkit-animation-duration: .2s;
-moz-animation-duration: .2s;
-o-animation-duration: .2s;
animation-duration: .2s;
}
.et_pb_module {
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
.et_pb_text_align_center {
text-align: center;
}
.info-item-category .et_pb_blurb_content {
text-align: center;
position: absolute;
top: 50px;
left: 50px;
bottom: 50px;
right: 50px;
/* background-color: rgba(0, 0, 0, 0.8); */
padding: 10px 20px;
-webkit-transform: translateX(0px);
transform: translateX(0px);
transition: transform 0.90s cubic-bezier(0.3,0.3,0.3,1);
-webkit-transition: -webkit-transform 0.90s cubic-bezier(0.3,0.3,0.3,1);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
justify-content: center;
-ms-justify-content: center;
-webkit-justify-content: center;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
display: flex;
display: -ms-flex;
display: -webkit-flex;
}
.et_pb_blurb_content {
position: relative;
max-width: 550px;
margin: 0 auto;
text-align: center;
}
.et_pb_main_blurb_image {
display: inline-block;
max-width: 100%;
margin-bottom: 30px;
line-height: 0;
}
.et_pb_blurb .et_pb_image_wrap {
display: block;
margin: auto;
}
.et_pb_blurb_0 .et-pb-icon {
font-size: 50px;
color: #ffffff;
}
.et_pb_animation_top.et-animated {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(.77,0,.175,1);
-moz-animation: fadeTop 1s 1 cubic-bezier(.77,0,.175,1);
-o-animation: fadeTop 1s 1 cubic-bezier(.77,0,.175,1);
animation: fadeTop 1s 1 cubic-bezier(.77,0,.175,1);
}
.et-waypoint {
opacity: 0;
}
.et-pb-icon {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: ETmodules;
font-size: 96px;
font-weight: 400;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
line-height: 1;
text-transform: none;
content: attr(data-icon);
speak: none;
}
h4 { margin: 0;
padding: 0;
border: 0;
outline: 0;
background: 0 0;
font-size: 100%;
vertical-align: baseline;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;}
.info-item-category.under {
transform: rotateY(180deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
background-size: cover;
background-position: center center;
-webkit-transition: -webkit-transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
transition: transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
overflow: hidden;
position: absolute;
top: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.et_pb_blurb_1.et_pb_blurb {
background-image: url();
.info-item-category.under .et_pb_blurb_content {
background-color: rgba(255,255,255,0.9);
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
transform: translateX(50%);
-webkit-transform: -webkit-translateX(50%);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.item-category:hover .info-item-category.under {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.item-category:hover .info-item-category {
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.item-category:hover .info-item-category.under .et_pb_blurb_content {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
