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>