Add this code to the Divi Theme Options >Custom CSS or Child theme style.css

<style type=”text/css”>

.fader img { transition: 1s ease-in-out; }
img.swap1, div.fader:hover img.swap2 { opacity: 1.0; }
.fader:hover img.swap1, img.swap2 { opacity: 0; }

</style>

Put this section into a code module after editing the path to your own image files.

<div class="fader">
<img class="swap1" style="position: absolute;" src="image1.jpg" alt="" height="320" width="320"><img class="swap2" src="image2.jpg" alt="" height="320" width="320">
</div>

/** App Style header and Drop Down Menu **/

.mobile_nav.opened .mobile_menu_bar:before {

content: “\4d”;

}

Paste this code into Divi Theme Options > Integrations > Add code to the body.

<style>
.et_mobile_menu .menu-item-has-children > a { background-color: transparent; }
#main-header .et_mobile_menu li ul.sub-menu.hide { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu li ul.sub-menu.visible { display: block !important; visibility: visible !important; }
.et_mobile_menu .menu-item-has-children > a:after { content: ‘+’; position: absolute; right: 20px; }
</style>
<script>
(function($) {

function setup_collapsible_submenus() {
var $menu = $(‘#mobile_menu’),
top_level_link = ‘#mobile_menu > .menu-item-has-children > a’;
$menu.find(‘a’).each(function() {
$(this).off(‘click’);

if ( $(this).is(top_level_link) ) {
$(this).attr(‘href’, ‘#’);
$(this).next(‘.sub-menu’).addClass(‘hide’);
}

if ( ! $(this).siblings(‘.sub-menu’).length ) {
$(this).on(‘click’, function(event) {
$(this).parents(‘.mobile_nav’).trigger(‘click’);
});
} else {
$(this).on(‘click’, function(event) {
event.preventDefault();
$(this).next(‘.sub-menu’).toggleClass(‘visible’);
});
}
});
}

$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>

#footer-info {

    font-size: 0.7em;

}

Insert your image and click the pencil icon to edit its properties – make the Image CSS Class: grey_logo

Add the following code to the Theme Options Panel

.grey_logo {
-webkit-filter: saturate(0%) opacity(50%);
filter: opacity(0.5) saturate(0%);
}

.grey_logo:hover {
-webkit-filter: saturate(1) opacity(100%);
filter: saturate(1); opacity(1);
}

Works in Firefox, Safari & Chrome – who cares about Internet Explorer?

Copy the header.php from the parent theme to the child theme folder and edit it to include the following code at the very top. This will send IE7 users to another website that could be tailored to work for them.

<?php if ( strpos( $_SERVER[‘HTTP_USER_AGENT’], ‘MSIE 7’ ) ) {
header( ‘Location: http://macnetwork.co.uk/’ ) ;
} ?>

This effect uses a .png file as a screen overlay

#fly-screen {

    background: transparent url("http://domain.com/wp-content/uploads/2015/11/pattern.png") repeat scroll left top;

    height: 100%;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 2;

}

First get the code from Google Fonts Import

add the following to the Custom CSS

@import url(https://fonts.googleapis.com/css?family=Sniglet);

h1, h2, h3, h4, h5, h6 {

    font-family: "Sniglet",cursive!important;

}

.et_pb_contact_right:before {
color: #afafaf;
content: "(to show you're human) ";
font-size:smaller;
position: static;
}

.et_pb_map_container {

    filter: url("data:image/svg+xml;utf8,#grayscale");

    filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: gray; /* IE6-9 */

    -webkit-filter: grayscale(100%);

}

Sometimes you only want the CSS changes to apply at certain screen size, bracket the CSS like this:

@media screen and (max-width: 767px) {

.custom_section{

height:0;

}

}

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {

background-color: #fff !important;

border: none !important;

width: 100% !important;

-moz-border-radius: 2 !important;

-webkit-border-radius: 2 !important;

border-radius: 2 !important;

font-size: 14px;

color: #999 !important;

padding: 8px !important;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.wpcf7-submit {

color: #F28A00 !important;

margin: 6px auto 0;

cursor: pointer;

font-size: 20px;

font-weight: 500;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

padding: 1px 10px;

line-height: 1.7em;

background: transparent;

border: 2px solid;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-moz-transition: all 0.2s;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.wpcf7-submit:hover {

background-color: #fff;

border-color:#eee;

padding: 1px 10px !important;

}

In Custom CSS / Main Element

-webkit-filter: saturate(1.75);

filter: saturate(1.75);

Use the More button in the post editor to add a break point. You can also put <!–more–> using the Text Editor 

Then go to Divi Theme Options:

Enable: BLOG STYLE MODE

Enable: USE EXCERPTS WHEN DEFINED

That should do it.

sup

{

    font-size: 70%;

    vertical-align: text-middle;

    line-height: 0;

}

/*

 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files

 *

 * [1] IE9

 * [2] IE10+

 */

/* 1 */

.ie9 img[src*=".svg"] {

  width: 100%;

}

/* 2 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  img[src*=".svg"] {

    width: 100%;

 height:100%;

  }

}