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>





