Greyscale Hover Effect using any portal for SMF

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

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

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

Hashiya Mendis
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

Hashiya Mendis
Mick you still around ?  :wondering:
4

Mick
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

Hashiya Mendis
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

Mick
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

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

8

Mick
Maximized the width to a higher value?


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

Hashiya Mendis
Doesn't seem to work that way either.
10

Mick
Quote from: Hashiya Mendis on July 26, 2013
Doesn't seem to work that way either.

alright, let me actually test this.  brb
11

Mick
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

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

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



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


Advertisement  



Design Crowd

Hot on idesignSMF

Professional & Impressive. We provide top quality free SMF themes with excellent support.

go up