Documentation & Tutorials. We have a great selection of tutorials to help you make the most of your theme.

Greyscale Hover Effect using any portal for SMF

Mick in Tutorials on 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.





Tagged with:


Mick

Mick G

idesignsmf.com

    

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

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

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

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

Mick you still around ?  :wondering:
4

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
5

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

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

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

8

Maximized the width to a higher value?


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

Doesn't seem to work that way either.
10

Doesn't seem to work that way either.

alright, let me actually test this.  brb
11

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

Hey mick, it finally worked ! Thanks  :smiley: What seem to have been the error. I'd like to know myself  :wink:
13

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




Latest Discussions

Join the conversation

Our Most Popular Features