Sunday, 08 May 2016 10:54

Our Partners

Written by

This is an excellent showcase for affiliations or memberships of relevant organisations. The icons are animated when they are hovered over. I based this on a module from the JSN Dona template.

Our partners

CSS

/*--- Our Partners ---*/

.our-partners {
	background: #F0F2F3;	/* Optional */
	padding: 10px;			/* Optional */
}

.our-partners h3 {
	font-size: 18px;
	line-height: 26px;
	text-transform: uppercase;
	font-weight: 700;	
	margin: 30px 0px 30px 0px;	
}

.our-partners .op-content {
  background: #fff;
  padding: 34px 30px;
  /*min-height: 250px;*/ /* Give the content a minumum height when needed */  
}

.our-partners .op-content:before,
.our-partners .op-content:after,
.our-partners .op-content ul:before,
.our-partners .op-content ul:after {
	content: "";
	display: table;
}

.our-partners .op-content:after,
.our-partners .op-content ul:after  {
	clear: both;
}

.our-partners ul {
	margin: -30px -15px; /* this compensates for the <li> margins */
}

.our-partners ul li {
	float: left;
	list-style: none;
	margin: 30px 0 0;
	padding: 0 15px;
	width: 29%;
	height: 80px;
	line-height: 80px;
	text-align: center;
}

.our-partners ul li img {
	transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}

.our-partners ul li img:hover {
	transform: scale(1.2);
	-o-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
}

@media screen and (max-width: 480px) {
	.our-partners .op-content { 		
		min-height: 1px; 
	}
	.our-partners ul li {
	  width: 50%;
	}
}

HTML

<div class="our-partners">

	<h3>Our partners</h3>

	<div class="op-content">	
		<ul>
			<li><img src="/images/modules/793/logo1.png" alt="" /></li>
			<li><img src="/images/modules/793/logo2.png" alt="" /></li>
			<li><img src="/images/modules/793/logo3.png" alt="" /></li>
			<li><img src="/images/modules/793/logo4.png" alt="" /></li>
			<li><img src="/images/modules/793/logo5.png" alt="" /></li>
			<li><img src="/images/modules/793/logo6.png" alt="" /></li>
		</ul>
	</div>

</div>

 

Read 1131 times Last modified on Sunday, 08 May 2016 11:39