Greyscale Hover Effect using any portal for SMF

Mick in Tutorials

Jul 08, 2013

The other day i had a request on how to use Greyscale in SMF (How to Grayscale Hover Effect with HTML5 canvas and jQuery). I will show you how to make a grayscale/color image hover effect with jQuery. To achieve this effect, two images are required: a color and a grayscale version.

view demo

-Convert your images to Greyscale using your favorite image editor.
-Create n HTML block and add the following:

Code: [Select]

<ul class="greyscale">
     <li> <a href="#"><img src="../path-to-image/"  class="grey" alt=""/></a>
	  <img src="../path-to-image_grey/" class="color" alt=""/>
     </li> 
     <li> <a href="#"><img src="../path-to-image/" class="grey" alt=""/></a>
	  <img src="../path-to-image_grey/" class="color" alt=""/>
     </li> 
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
                  $(document).ready(function(){
                  $("img.grey").hover(
                                   function() {
                  $(this).stop().animate({"opacity": "0"}, "slow");
               },
                                   function() {
                  $(this).stop().animate({"opacity": "1"}, "slow");
              });
         });
</script>

Open your theme's /css/index.css and at the very end, add the following:

Code: [Select]

.greyscale li {
	list-style-type: none;
	height: 400px;
	width: 400px;
	position: relative;
        float: left;
        margin: 10px;
}

img.grey {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
 
img.color {
	position: absolute;
	left: 0;
        top: 0;
}

For this demo, 4 images where used.

Tagged with:

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.

14 Comments

Hashiya Mendis

Jul 16, 2013

Hey Mick! So I switched my portal systems from adk to tinyportal. And I tried making a html block and placing my code there, but then this happens.(attached image) It worked fine while I used the Adk portal

any Idea whats happening ?

And my block code is

Code: [Select]

<ul class="greyscale">
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/ButtonNormal/4_zps456acadc.png"  class="grey" alt=""/></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/4_zpsbe33bc4d.png" class="color" alt=""/>
     </li> 
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/ButtonNormal/5_zps0a963e3a.png" class="grey" alt=""/></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/5_zpsfcba5d67.png" class="color" alt=""/>
     </li> 
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/ButtonNormal/3_zpsfbc975cf.png"  class="grey" alt=""/></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/3_zps842e15a4.png" class="color" alt=""/>
     </li> 
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/ButtonNormal/2_zpsaa8aff51.png" class="grey" alt=""/></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/2_zpsf887810f.png" class="color" alt=""/>
     </li> 
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/ButtonNormal/7_zps2fb40fd7.png"  class="grey" alt=""/></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/7_zpsa38daf59.png" class="color" alt=""/>
     </li> 
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/ButtonNormal/1_zpsff7a89d6.png" class="grey" alt=""/></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/1_zps247231c4.png" class="color" alt=""/>
     </li> 
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/ButtonNormal/6_zps25edcc36.png"  class="grey" alt=""/></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/SingleButtonHover/6_zps4565e656.png" class="color" alt=""/>
     </li> 
   
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
                          //avoid conflict with other script
                          $g=jQuery.noConflict();
                          $g(document).ready(function($) {
                  $("img.grey").hover(
                                   function() {
                  $(this).stop().animate({"opacity": "0"}, "slow");
               },
                                   function() {
                  $(this).stop().animate({"opacity": "1"}, "slow");
              });
         });
</script>

Mick

Jul 16, 2013

It looks like you're missing a css code. Make sure all the CSS code is intact.

Hashiya Mendis

Jul 19, 2013

Hey Mike, sorry for the late reply I changed the portal system to adk again so no problem with that. Now I have a new question. So I was wondering is it possible to have a another set of images with different size to have the hover property ? Like lets say i have a width23px height32px on my front page, and on another I want a width 100px height 100px image. How can I do that ? If it's possible please let me know

Hashiya Mendis

Jul 25, 2013

Mick you still around ?

Mick

Jul 25, 2013

I don't know if you used everything in a block but let's say u added the JavaScript code to the index template.php right? Use the <ul> code in a block and make sure you rename all instances of the CSS code to use it again.

Like this:
You already used greyscale {

If you want to use the again, do something like:
greyscale-1 { and change the dimensions

Hashiya Mendis

Jul 25, 2013

Thanks Mick it worked

But I have another problem. (Sorry to bother you so much like this :confused: ). I was making a list of buttons and I get some disorder in their aligning (I've attached an Image). How can I get the 'Dropped' go down and center ?

Here is my html code.

Code: [Select]

<div align="center">
 <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Text/ongoing_zpse3ca7f22.png">
</div>

<ul class="greyscale">
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/12-2_zpsd5df4c36.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/12_zps7010554f.png" border="0"class="color" alt="" />
     </li> 
     
    
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/10-2_zps8e844601.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/10_zps7fa34f60.png" border="0"class="color" alt="" />
     </li> 
     
     
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/11-2_zps72447cf8.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/11_zps0519416d.png" border="0"class="color" alt="" />
     </li> 
     
     
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/13-2_zpsd4be6c01.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/13_zps96951c9b.png" border="0"class="color" alt="" />
     </li> 
     
     
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/8-2_zps49d72ce4.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/8_zps3f939044.png" border="0"class="color" alt="" />
     </li> 
     
     
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/4-2_zps95d95f48.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/4_zpsaff202bc.png" border="0"class="color" alt="" />
     </li> 
     
     
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/3-2_zps986832c0.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/3_zpsa43102b8.png" border="0"class="color" alt="" />
     </li> 
     
     
       <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/5-2_zpsf12db540.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/5_zps7e407aac.png" border="0"class="color" alt="" />
     </li> 
     
     
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/14-1_zps58bacab7.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/14-2_zps55baca11.png" border="0"class="color" alt="" />
     </li> 

     <div align="center">
 <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Text/completed_zpsb41542eb.png">
</div>

      
    <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/7-2_zps4dd86a3a.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/7_zps0458fb12.png" border="0"class="color" alt="" />
     </li> 
     
     
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/2-2_zps5e39e7f7.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/2_zps65ea3895.png" border="0"class="color" alt="" />
     </li> 
    
       <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/1-2_zps5fe8b006.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/1_zpsd0a02a59.png" border="0"class="color" alt="" />
     </li> 
     
  <br><div align="center">
 <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Text/dropped_zps4438746b.png">
</div></br>
   
     
        <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/6-2_zps18aeb665.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/6_zps3c1e8ef5.png" border="0"class="color" alt="" />
     </li> 
     
    <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/9-2_zpsb6539537.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/9_zpsc8e369d7.png" border="0"class="color" alt="" />
     </li> 
  
   
</ul>
   
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
                          //avoid conflict with other script
                          $g=jQuery.noConflict();
                          $g(document).ready(function($) {
                  $("img.grey").hover(
                                   function() {
                  $(this).stop().animate({"opacity": "0"}, "slow");
               },
                                   function() {
                  $(this).stop().animate({"opacity": "1"}, "slow");
              });
         });
</script>

Mick

Jul 26, 2013

I have not tested this but what if you close your button group with a </ul>?

Since the opening is <ul class="greyscale"> one group would be "ongoing", the other is "completed" and "dropped".

Hashiya Mendis

Jul 26, 2013

I tired that, just seem to change one bit. Here is the page just incase you wanted to see.

Mick

Jul 26, 2013

Maximized the width to a higher value?

Code: [Select]

.greyscale li {
    list-style-type: none;
    height: 400px;
    width: 400px;
    position: relative;
        float: left;
        margin: 10px;
}

Hashiya Mendis

Jul 26, 2013

Doesn't seem to work that way either.

Mick

Jul 27, 2013

Quote from: Hashiya Mendis on Jul 26, 2013

Doesn't seem to work that way either.

alright, let me actually test this. brb

Mick

Jul 27, 2013

Try this:

Code: [Select]

<style>
.greyscale  {
    position: relative;
    display: inline-block;
}
.greyscale li {
    list-style-type: none;
    height: 400px;
    width: 400px;
    position: relative;
    float: left;
    margin: 10px;
}

img.grey {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
 
img.color {
    position: absolute;
    left: 0;
    top: 0;
}
</style>


<div style="text-align:center;">
 <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Text/ongoing_zpse3ca7f22.png">
</div>

<ul class="greyscale">
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/12-2_zpsd5df4c36.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/12_zps7010554f.png" border="0"class="color" alt="" />
     </li>      
    
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/10-2_zps8e844601.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/10_zps7fa34f60.png" border="0"class="color" alt="" />
     </li>     
     
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/11-2_zps72447cf8.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/11_zps0519416d.png" border="0"class="color" alt="" />
     </li>     
     
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/13-2_zpsd4be6c01.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/13_zps96951c9b.png" border="0"class="color" alt="" />
     </li>      
     
      <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/8-2_zps49d72ce4.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/8_zps3f939044.png" border="0"class="color" alt="" />
     </li>      
     
      <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/4-2_zps95d95f48.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/4_zpsaff202bc.png" border="0"class="color" alt="" />
     </li>     
     
      <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/3-2_zps986832c0.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/3_zpsa43102b8.png" border="0"class="color" alt="" />
     </li>      
     
      <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/5-2_zpsf12db540.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/5_zps7e407aac.png" border="0"class="color" alt="" />
     </li>      
     
      <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/14-1_zps58bacab7.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/14-2_zps55baca11.png" border="0"class="color" alt="" />
     </li>
</ul>



<div style="text-align:center;">
 <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Text/completed_zpsb41542eb.png">
</div>

<ul class="greyscale">      
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/7-2_zps4dd86a3a.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/7_zps0458fb12.png" border="0"class="color" alt="" />
     </li> 
     
      <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/2-2_zps5e39e7f7.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/2_zps65ea3895.png" border="0"class="color" alt="" />
     </li> 
    
      <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/1-2_zps5fe8b006.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/1_zpsd0a02a59.png" border="0"class="color" alt="" />
     </li> 
</ul>



<div style="text-align:center;">
 <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Text/dropped_zps4438746b.png">
</div>
   
<ul class="greyscale">     
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/6-2_zps18aeb665.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/6_zps3c1e8ef5.png" border="0"class="color" alt="" />
     </li> 
     
     <li> <a href="#"><img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20Buttons/9-2_zpsb6539537.png" border="0"class="grey" alt="" /></a>
      <img src="http://i798.photobucket.com/albums/yy269/timeisticking/Project%20hover/9_zpsc8e369d7.png" border="0"class="color" alt="" />
     </li>    
</ul>
   
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
                          //avoid conflict with other script
                          $g=jQuery.noConflict();
                          $g(document).ready(function($) {
                  $("img.grey").hover(
                                   function() {
                  $(this).stop().animate({"opacity": "0"}, "slow");
               },
                                   function() {
                  $(this).stop().animate({"opacity": "1"}, "slow");
              });
         });
</script>

Hashiya Mendis

Jul 27, 2013

Hey mick, it finally worked ! Thanks

What seem to have been the error. I'd like to know myself

Mick

Jul 27, 2013

You used 1 instance of <ul class="greyscale">. It needed 3 instances as posted in a few posts back ;)