Weebly Tricks #72 - Grayscale Image Gallery Effects

Here is the latest CSS effects from Dynamic Drive playing image colors. Initially, images are stacked with gray colors and later when clicked, reveals its larger and colored version. This trick was made possible with CSS filters and CSS3 effects.

CLICK HERE FOR LIVE DEMO

The demo works perfectly on the latest version of Chrome and Firefox. When I tested it on a portable Chrome on our office, it gave me a different effect. The transformation is still present but the sliding effects is gone. Dynamic Drive also specifically says it doesn't support IE11. Bottom line, use the latest version of browsers as much as possible.

The images are set and by default placed on the left side of your page. Do not ask me on how to move it to the right because for now, I don't know. What I can help you is to insert it on your Weebly template and modify its dimension.

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}

ul.gallery{
  list-style: none;
  margin: 0;
  padding: 0;
  height: 680px;
}

ul.gallery li{
  display: block;
  width: 200px; /* width of gallery */
  height: 50px; /* portion of each gallery image that's shown initially */
  position: relative;
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


ul.gallery li img{
  position: absolute;
  width: 100%;
  border: 10px solid #D8D2A2;
 -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
filter: url(#grayscale);
  filter: grayscale(1);
-webkit-transition: all .5s ease-in-out; /* CSS3 transition setting */
-moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}


ul.gallery li:focus{ /* when a LI receives focus (clicked on) */
  z-index: 100;
outline: none;
transform: rotate(3deg); /* rotate enlarged LI by 3 degrees */
pointer-events: none; /* disable pointer events on enlarged LI so thumbnail(s) beneath it can receive those events */
}

ul.gallery li:nth-of-type(even):focus{ /* even LIs that received focus */
transform: rotate(-1deg); /* rotate enlarged LI by -1 degrees instead */
}

ul.gallery li:focus img{
  transform: scale(1.2) translateX(80%); /* enlarge focused image and move horizontally */
  top: 10px; /* shift enlarged image downwards by 10px */
outline: none;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  -webkit-filter: grayscale(0); /* nullify grayscale effect */
  filter: none;
}

ul.gallery li:first-of-type:focus img{ /* first image within list of thumbnails that receives focus */
  top: 50px; /* move image down by 80px so it's not obscured by top of window edge */
}

svg{
position: absolute;
visibility: hidden;
}
</style>

Notes:

I recommend you to insert the code above on a page header (not site header) because it uses the overflow tag for your HTML. There isn't much to discuss about the values you need to change, it is all written on the code so learn to read comments on scripts.

---

BODY CODE
Where to place these codes? Click Here!

---

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>
<ul class="gallery" title="Tab after clicking on a thumbnail to cycle though thumbnails">
<li tabindex="1"><img src="http://mwtdatabase.weebly.com/files/theme/gig1.jpg" /></li>
<li tabindex="2"><img src="http://mwtdatabase.weebly.com/files/theme/gig2.jpg" /></li>
<li tabindex="3"><img src="http://mwtdatabase.weebly.com/files/theme/gig3.jpg" /></li>
<li tabindex="4"><img src="http://mwtdatabase.weebly.com/files/theme/gig4.jpg" /></li>
<li tabindex="5"><img src="http://mwtdatabase.weebly.com/files/theme/gig5.jpg" /></li>
<li tabindex="6"><img src="http://mwtdatabase.weebly.com/files/theme/gig6.jpg" /></li>
</ul>

Notes:
Green text - Change with your image source link.

---

CONCLUSION

---

I've noticed that Dynamic Drive has started upgrading it's CSS effects. Hopefully they will teach us even more useful widgets. If you want more details on this tutorial please visit the code source found on the demo page. Don't forget to share and subscribe if you like this tutorial.

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!