logo-icon
       Tutorials   Themes   Mods   Inspiration   Collections   Theme Store   Mod Store   WIP   Deals   About   Terms   Privacy   Contact   Team   Playground   Help   Credits   Simple Machines   Simple Portal   Tiny Portal   SMF Review

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

  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.
Commitment issues? Unsubscribe at any time.

Get 100% complete access to our entire collection and find out why 11,210 SMF owners prefer our themes



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





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

  • With a commitment to quality content for the SMF community, we craft responsive SMF themes for the popular free software Simple Machines Forum and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.
SMF 2.0.17 | SMF © 2017, Simple Machines
SimplePortal 2.3.7 © 2019, SimplePortal
idesignSMF is not affiliated with SMF
© 2009-2020 idesignSMF
Made with in Ft. Myers, FL.
  • In Partnership with  
    11,210    happy idesignSMF members