A
b
o
u
t
P
r
o
j
e
c
t
s
BLURB MODULES ROCKING ON HOVER
.services.et_pb_blurb {
transition: all 400ms !important;
animation: blurbAnimation 650ms;
}
.services.et_pb_blurb:hover {
animation: blurbAnimationHover 750ms;
transform: scale(1.04);
}
@keyframes blurbAnimation {
0% { transform: perspective(900px) rotateX(-10deg) scale(1.07); }
50% { transform: perspective(900px) rotateX(15deg) scale(1.03); }
100% { transform: perspective(900px) rotateX(0deg) scale(1); }
}
@keyframes blurbAnimationHover {
0% { transform: perspective(900px) rotateX(15deg) scale(1); }
50% { transform: perspective(900px) rotateX(-15deg) scale(1.01); }
100% { transform: perspective(900px) rotateX(0deg) scale(1.04); }
}
.services, .et_pb_blurb .blurb-read-more {
font-weight: 600;
border-bottom: 1px solid;
}
.services.et_pb_blurb:hover .blurb-read-more {
color: #FFF;
}
SVG LOGOS V4
div.et_pb_menu__logo a img{
width: 120px !important;
}
Icons Next to text
<span style="font-family: ETmodules;"></span>
Left Blurb Image size
.et_pb_main_blurb_image { width: 100px !important; }
Different Header on scroll
Create two header sections.
Add a custom ID “header-fixed” to the header you want to display on the scroll.
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .header-f-wrapper { display:none; } @media only screen and ( min-width: 480px ) { /* fixed only for deviced > 480px, feel free to change the value */ .header-f-wrapper { z-index: 999; /* display at the top */ position: fixed; width:100%; top: 0; -webkit-animation: fadein 0.5s ease-in; -moz-animation: fadein 0.5s ease-in; animation: fadein 0.5s ease-in; } .header-f-wrapper.header-show { display:block; }} @media only screen and ( min-width: 782px ) { .admin-bar #header-fixed{ top: 32px; SCRIPT --------
<script type="text/javascript"> jQuery( document ).ready(function() { var header_fixed = jQuery("#header-fixed") jQuery( header_fixed ).wrap( "<div class='header-f-wrapper'></div>" ); var header_f_wrapper = jQuery (".header-f-wrapper"); var height = jQuery(".et-l--header").height()+(20); jQuery(window).scroll(function(){ if(jQuery(this).scrollTop()>height){ header_f_wrapper.addClass("header-show"); } else{ header_f_wrapper.removeClass("header-show"); } }) }) </script>