Squarespace Templates: Logos

Use this tool to find block ID.

Logos Style 01. Different logos on hover

1. Add Markdown Block

with syntax

* [![logo 01](http://html.rainbow-themes.net/setech/images/clients/1_hover.png) ![logo 01](http://html.rainbow-themes.net/setech/images/clients/1.png)][1]
* [![logo 02](http://html.rainbow-themes.net/setech/images/clients/2_hover.png) ![logo 02](http://html.rainbow-themes.net/setech/images/clients/2.png)][2]
* [![logo 03](http://html.rainbow-themes.net/setech/images/clients/3_hover.png) ![logo 03](http://html.rainbow-themes.net/setech/images/clients/3.png)][3]
* [![logo 04](http://html.rainbow-themes.net/setech/images/clients/4_hover.png) ![logo 04](http://html.rainbow-themes.net/setech/images/clients/4.png)][4]
* [![logo 05](http://html.rainbow-themes.net/setech/images/clients/5_hover.png) ![logo 05](http://html.rainbow-themes.net/setech/images/clients/5.png)][5]
* [![logo 06](http://html.rainbow-themes.net/setech/images/clients/6_hover.png) ![logo 06](http://html.rainbow-themes.net/setech/images/clients/6.png)][6]

[6]: https://beaverhero.com
[5]: https://beaverhero.com
[4]: https://beaverhero.com
[3]: https://beaverhero.com
[2]: https://beaverhero.com
[1]: https://beaverhero.com

See how to

• Insert Images: https://support.squarespace.com/hc/en-us/articles/206543587-Markdown-cheat-sheet#toc-images
• Insert Links: https://support.squarespace.com/hc/en-us/articles/206543587-Markdown-cheat-sheet#toc-links

2. Add Code Block

<style>
/* Image List style */
.markdown-block ul {
    list-style: none;
    padding-left: 0;
}
  .markdown-block ul li a {
  	position: relative;
    overflow: hidden;
    display: block;
  }
   /* image width */
.markdown-block ul li {
    float: left;
    width: 16.666%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
}
  .markdown-block ul li img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/* first image */
.markdown-block ul li img:first-child {
    position: absolute;
    -webkit-transform: translateY(calc(-100% - 20px));
    -ms-transform: translateY(calc(-100% - 20px));
    transform: translateY(calc(-100% - 20px));
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/* first image hover */
.markdown-block ul a:hover img:first-child {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}
/* second image */
.markdown-block ul a:hover img:last-child {
    -webkit-transform: translateY(calc(100% + 20px));
    -ms-transform: translateY(calc(100% + 20px));
    transform: translateY(calc(100% + 20px));
}
  /* Mobile */
  @media screen and (max-width:767px) {
/* Logo width */
  .markdown-block ul li {
      width: 48%;
      margin: 1%;
  }
    .markdown-block ul li:nth-child(2n+1) {
    clear: left;
} 
  }
</style>