Greyscale Hover Effect using any portal for SMF

Started by Mick, 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.


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

<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:

.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.






Jul 16, 2013 #1 Last Edit: Jul 16, 2013 by Hashiya Mendis
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   :wondering: any Idea whats happening ?

And my block code is
<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>
It looks like you're missing a css code. Make sure all the CSS code is intact.
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  :smiley:
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
Thanks Mick it worked  :evil: 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.
<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>
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".
I tired that, just seem to change one bit. Here is the page just incase you wanted to see.

Maximized the width to a higher value?

.greyscale li {
    list-style-type: none;
    height: 400px;
    width: 400px;
    position: relative;
        float: left;
        margin: 10px;
}
Quote from: Hashiya Mendis on Jul 26, 2013
Doesn't seem to work that way either.

alright, let me actually test this.  brb
Try this:
<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>
Hey mick, it finally worked ! Thanks  :smiley: What seem to have been the error. I'd like to know myself  :wink:
You used 1 instance of <ul class="greyscale">. It needed 3 instances as posted in a few posts back ;)