cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container" style="width:100%">
  <div class="services_text" >
     <p>a whole paragraph of text here</p>
  </div>
  <div class="col-container">
      <div class="col col1 wrap services" id="strategy" >
          <div class="icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100">

      <path class="pic" stroke-linejoin="round" stroke-miterlimit="10" d="M78.57,4.26H100v89.36H59.52 M47.62,100
		V76.6H28.57V51.06h14.29V29.79h14.29V0" />
      <path class="pic blacky" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M42.86,12.77
		L57.14,0l14.14,12.77" />
      <path class="pic" stroke-linejoin="round" stroke-miterlimit="10" d="M14.29,4.26v23.4 M0,38.3h28.57V19.15
		 M35.71,63.83H61.9v19.15 M14.29,48.94v36.17h19.05v8.51H0V4.26h35.71 M76.19,93.62v-38.3H88.1 M100,80.85H88.1 M100,68.08H88.1
		 M100,42.55H57.14v10.64 M71.43,42.55V21.28h14.29v10.64" />

    </svg>

  </div>
  <div class="service-content">
    <div class="service-title">
      <h2>Strategy</h2></div>

    <ul class="service-list">
      <li>Project management</li>
      <li>Digital marketing strategy</li>
      <li>UX UI</li>
      <li>
        <input type="button" value="Learn More" />
      </li>
    </ul>
  </div>
      </div>
      <div class="col col2 wrap services" id="content">
         <div class="icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="-.5 .5 105 100">
      <path class="pic" stroke-linejoin="round" stroke-miterlimit="10" d="M34.83,78.37v-8.71h4.35v-8.71H17.42v8.71
		h4.35v8.71C8.47,80.12,1.02,86.63,0,100.14h56.92C55.9,86.63,48.12,80.12,34.83,78.37z" />
      <path class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M97.47,1.31
		L44.73,54.06 M51.67,47.01c-5.14-5.14,0.21-20.79,12.97-33.54C71.2,6.9,78.38,2.16,82.73,0v16.11 M68.34,30.48h20.92 M59.64,39.19
		h23.09c-12.2,11.08-26.63,12.31-31.06,7.89 M97.52,1.23c3.97,3.97,3.06,11.83-1.93,20.54H77.01" />
    </svg>

  </div>
  <div class="service-content">
    <div class="service-title">
      <h2>Content</h2></div>

    <ul class="service-list">
      <li>Content strategy</li>
      <li>Brand storytelling</li>
      <li>Content creation</li>
      <li>
        <input type="button" value="Learn More" />
      </li>
    </ul>
  </div>
      </div>
      <div class="col col3 wrap services" id="analytics" >
          <div class="icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="-.5 0 105 100">

      <path class="pic" stroke-linejoin="round" stroke-miterlimit="10" d="M75.56,100c0,0,24.44-17.78,24.44-30.95
		c0-15.2-20-20-24.44-1.52c-4.45-18.48-24.45-13.68-24.45,1.52C51.11,82.22,75.56,100,75.56,100z" />

      <path class="pic" stroke-linejoin="round" stroke-miterlimit="10" d="M46.67,93.33H0V0h48.89l22.22,22.22v20" />
      <path class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M48.89,0v22.22
			h22.22" />


      <path class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M13.33,53.33h8.89
			v17.78h-8.89V53.33z M31.11,44.44H40v26.67h-8.89V44.44z M22.22,31.11h8.89v40h-8.89V31.11z M8.89,71.11H40" />
    </svg>

  </div>
  <div class="service-content">
    <div class="service-title">
      <h2>Analytics</h2></div>

    <ul class="service-list">
      <li>Keyword reseach and metrics</li>
      <li>Campaign success analysis</li>
      <li>Conversion optimisation</li>
      <li>
        <input type="button" value="Learn More" />
      </li>
    </ul>
  </div>
      </div>
      <div class="col col4 wrap service" id="design" >
          <div class="icon">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100">

      <path class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M40.1,59.49
		c-13.61-13.52-13.61-35.44,0-48.96c13.61-13.51,35.68-13.51,49.29,0c13.61,13.52,13.61,35.44,0,48.96
		c-6.51,6.46-17.06,6.46-23.58,0L52.96,46.72c-1.18-1.18-3.1-1.18-4.28,0c-1.19,1.18-1.19,3.08,0,4.25c2.36,2.35,2.36,6.16,0,8.52
		C46.3,61.85,42.46,61.85,40.1,59.49z" />

      <ellipse class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="77.6" cy="20.12" rx="4.54" ry="4.51" />

      <ellipse class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="85.96" cy="35.01" rx="3.03" ry="3.01" />

      <ellipse class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="77.6" cy="49.91" rx="6.06" ry="6.02" />

      <ellipse class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="59.38" cy="16.92" rx="4.54" ry="4.51" />


      <path class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M62.3,99.5H0.7
		V33.53L62.3,99.5z M8.73,60.78V90.9h28.12L8.73,60.78z M11.41,45.01l-2.68,2.87 M18.11,52.18l-2.68,2.87 M24.8,59.35l-2.68,2.87
		 M31.45,66.56l-2.64,2.83 M38.19,73.69l-2.68,2.87 M44.89,80.86l-2.68,2.87 M51.58,88.03l-2.68,2.87" />

    </svg>


  </div>
  <div class="service-content">
    <div class="service-title">
      <h2>Design</h2></div>

    <ul class="service-list">
      <li>Digital design</li>
      <li>Photo & video</li>
      <li>Creative development</li>
      <li>
        <input type="button" value="Learn More" />
      </li>
    </ul>
  </div>
      </div>
      <div class="col col5 wrap services" id="products" >
         <div class="icon">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100px" height="100px" viewBox="-.5 0 105 100" e>
<path class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M0,18.09v28.58
	c0,6.86,6.83,6.86,6.83,6.86l27.3-3.43V10.09L4.55,13.52C2.04,13.52,0,11.47,0,8.94c0-5.23,3.1-3.37,29.58-8 M5.69,8.95l26.17-3.43"
	/>
<path class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M100,38.88
	c0,2.08-1.58,3.76-3.54,3.76H49.32c-1.95,0-3.54-1.68-3.54-3.76V3.76c0-2.08,1.58-3.76,3.54-3.76h47.14C98.42,0,100,1.68,100,3.76
	V38.88z M56.39,47.37h33 M72.89,42.64v4.74"/>
<ellipse class="pic" stroke-linejoin="round" stroke-miterlimit="10" cx="72.89" cy="37.9" rx="1.18" ry="1.18"/>
<path class="pic" stroke-linejoin="round" stroke-miterlimit="10" d="M45.79,33.16H100"/>
<path class="pic" stroke-linejoin="round" stroke-miterlimit="10" d="M65.26,97.08c0,1.6-1.31,2.92-2.9,2.92h-37.7
	c-1.59,0-2.9-1.31-2.9-2.92V65.03c0-1.6,1.31-2.91,2.9-2.91h37.7c1.59,0,2.9,1.31,2.9,2.91V97.08z M88.46,97.08l-17.4-8.74V73.77
	l17.4-8.74V97.08z"/>
</svg>

  </div>
  <div class="service-content">
    <div class="service-title">
      <h2>Products</h2></div>

    <ul class="service-list">
      <li>Print collateral</li>
 <li>Websites and email campaigns</li>
 <li>Mobile apps</li>
      <li>
        <input type="button" value="Learn More" />
      </li>
    </ul>
  </div>
      </div>
      <div class="col col6 wrap services" style="social">
          <div class="icon">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100px" height="100px" viewBox="-.5 0 105 100" >

	<path class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M60.87,0H17.39
		C7.79,0,0,8.53,0,19.05V38.1c0,10.52,7.79,19.05,17.39,19.05h4.35v19.05L41.3,57.14h19.56c9.6,0,17.39-8.52,17.39-19.05V19.05
		C78.26,8.53,70.47,0,60.87,0z"/>
	<path class="pic" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M47.83,73.81
		c0,6.58,4.87,11.9,10.87,11.9h10.87L82.61,100V85.71h6.52c6,0,10.87-5.33,10.87-11.9v-9.52c0-6.57-4.87-11.9-10.87-11.9"/>

		<path class="pic" d="M40.69,18.75c0.17,0.3,0.36,0.58,0.57,0.83c0.51,0.57,1.21,1.35,2.1,2.34c-0.76-0.37-1.59-0.67-2.48-0.89l-0.19-0.05
			V18.75 M36.9,35.91c0.91,0,1.6,0.23,2.1,0.71l0.64,0.61v0.25v0.12l0.03,0.12c0.07,0.27,0.12,0.56,0.14,0.87
			c-0.01,1.27-0.73,2.43-2.18,3.54c-1.38,1.05-2.84,1.65-4.33,1.77c-0.18,0.02-0.35,0.02-0.52,0.02c-1.22,0-2.01-0.43-2.5-1.35
			c-0.26-0.48-0.39-0.96-0.39-1.45c0-1.35,0.77-2.54,2.36-3.64C33.75,36.44,35.32,35.91,36.9,35.91 M40.63,9.57h-0.94V35.9
			c-0.69-0.66-1.62-0.99-2.79-0.99c-1.8,0-3.54,0.59-5.23,1.76c-1.86,1.29-2.79,2.77-2.79,4.46c0,0.66,0.17,1.3,0.51,1.93
			c0.66,1.25,1.79,1.87,3.38,1.87c0.2,0,0.4-0.01,0.61-0.03c1.69-0.14,3.3-0.8,4.85-1.97c1.72-1.32,2.57-2.77,2.57-4.37
			c-0.03-0.37-0.08-0.73-0.17-1.07V22c3.17,0.8,5.46,2.57,6.86,5.32c0.63,1.23,0.94,3,0.94,5.32c0,1.57-0.17,3.17-0.52,4.8
			l-0.34,1.63l0.81,0.21l0.39-1.46c0.4-1.51,0.6-3.13,0.6-4.84c0-3.89-1.33-7.32-3.99-10.29C43.88,21,42.75,19.75,42,18.92
			c-0.6-0.71-1-1.73-1.2-3.04c-0.11-0.8-0.17-2.03-0.17-3.69V9.57L40.63,9.57z"/>

</svg>


  </div>
  <div class="service-content">
    <div class="service-title">
      <h2>Social Media</h2></div>

    <ul class="service-list">
      <li>Engaging with people</li>
      <li>Brand awareness</li>
      <li>Targeting and measuring</li>
</li>
      <li>
        <input type="button" value="Learn More" />
      </li>
    </ul>
  </div>
      </div>      
  </div>
            
          
!
            
              .wrap {
  
  background-color:#eee;
  height:400px;
  
  position: relative;
}

.icon {position: absolute;
left:35%;
top:50px;}

.service-content {position:absolute;
left:0;
right:0;
bottom:20px;
  min-height:200px;
  -webkit-transform: translateZ(0px);
}
.service-list { visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
 -webkit-padding-start:0px }

.wrap:hover {
  background-color:#fff;
  color: 777;
}

.service-list li  {
  text-align:center;
  list-style-type:none;
  line-height: 1.9em;
  font-family: sans-serif;
 list-style-position: outside;
}
.wrap:hover > .service-content > .service-list {
 visibility:visible;
  opacity:1;
  transition-delay:.25s;
  left:20;
  bottom:0;
}

input[type="button"] { margin-top: 20px;background-color: red; color: #fff; border:0;padding:10px; text-transform:uppercase; font-weight:bold;}

.service-title h2 {text-align:center;
font-family:Lato, sans-serif;}

.pic {fill:none;
    color: red;
    stroke: currentColor;
}

.wrap:hover > .icon > svg  {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.services_text {background-color: red; color:white;}
.col-container .col {width: 33.3%; float: left; background-color: #ddd; box-sizing:border-box; border-left: 2px dotted #666; border-bottom: 2px dotted #666;}
     @media (min-width:  979px) {
    .services_text {width:33.3%; float:left; height: 800px;}
    .col-container {width:66.7%; float:left;}
 }
@media (max-width: 480px){
	.services_text {width:100%; float:left; height: 400px;}
    .col-container {width:100%; float:left;}
	.col-container .col {width: 50%; float: left;}
 }
@media (max-width: 320px){
	.services_text {width:100%; float:left;}
    .col-container {width:100%; float:left;}
	.col-container .col {width: 100%; float: left;}
 }
            
          
!
999px
Loading ..................

Console