title: custom code for Hover over,Zoom effect, with text into Divi Theme Wordpress code block, No spaces between the blocks
body: <p>I need some help pronto
  <strong>please visit</strong> <a href="https://mmmcgaha-vcxd.envatosites.com/" rel="nofollow noreferrer">https://mmmcgaha-vcxd.envatosites.com/</a> 
  to see the sample of what i wish to create in Divi theme code block</p>
  
  <p>Create mine, but not exactly as that, don't know if i can get some help...</p>
  
  <p>Thank you</p>
  
  <p>Below is sample code, am sorry it was a lot, but just had to select post that which i can from my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mendo-happy-healthy-header h3 {font-size: 70px;
      color: #4bb3e6;
      font-family: 'lulo_cleanone_bold';
      letter-spacing: -8px;
      line-height: 100px;}
      
  
      mendo-happy-healthy-header {
   margin-top: -20px !important;}
  
      .box { height: 274px;
             position: relative;
             overflow: hidden;
             width: 363px;
             margin-left: auto;
             margin-right: auto;
          }
    
    
  
      .box img {position: absolute;
                 left: 0;
                -webkit-transition: all 300ms ease-out;
                -moz-transition: all 300ms ease-out;
                -o-transition: all 300ms ease-out;
                -ms-transition: all 300ms ease-out;
                transition: all 300ms ease-out;
       }
   
  
      .box .overbox { background-color: rgba(28,28,28,0.81);
                      position: absolute;
                      top: 0;
                      left: 0;
                      color: #fff;
                      z-index: 100;
                     -webkit-transition: all 300ms ease-out;
                     -moz-transition: all 300ms ease-out;
                     -o-transition: all 300ms ease-out;
                     -ms-transition: all 300ms ease-out;
                     transition: all 300ms ease-out;
                     opacity: 0;
                     width: 363px;
                     height: 274px;
                     padding: 130px 20px;
                      }
  
      .box:hover .overbox { opacity: 1; }
                          .box .overtext {
                          -webkit-transition: all 300ms ease-out;
                          -moz-transition: all 300ms ease-out;
                          -o-transition: all 300ms ease-out;
                          -ms-transition: all 300ms ease-out;
                          transition: all 300ms ease-out;
                          transform: translateY(40px);
                         -webkit-transform: translateY(40px);
  
      .mendo-links { text-transform: lowercase;
                     font-size: 36px;
                     position: relative;
                     color: white;
                     text-shadow: 3px 0 29px rgba(0,0,0,0.28);
                     text-align: center;
                     vertical-align: middle;
                     margin-top: 26%;
                      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="/core-values"&gt;&lt;div class="box"&gt;&lt;p&gt;&lt;img src="/wp-content/uploads/2016/07/feature-1-image.jpg" alt="" /&gt;&lt;/p&gt;&lt;h4 class="mendo-links"&gt;Copywriting&lt;/h4&gt;&lt;p&gt;&lt;img class="mendo-lines" src="/wp-content/uploads/2016/07/LINES2.png" alt="" /&gt;&lt;/p&gt;&lt;div class="overbox"&gt;&lt;p&gt;&lt;/p&gt;&lt;div class="title overtext"&gt;&lt;p class="mendo-links-title"&gt;Copywriting&lt;/p&gt;&lt;/div&gt;&lt;div class="tagline overtext"&gt;&lt;p class="mendo-links-description"&gt;Synth jean shorts try-hard art party meh disrupt, forage offal ugh readymade cronut man braid&lt;/p&gt;&lt;p class="mendo-links-read-more"&gt;+ learn more&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>