Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] Can someone please help me with transitions for all images

Build custom WP THEMES, without
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
Old Nov 30, 2013, 02:22 PM
8 posts · Aug 2013
I am trying to create the same transition affect for all images as coded by default for thumbnails. In other words I would like all images appear to appear gray scale until hovered over. I downloaded the CSS3 Transitions plug-in but I couldn't get that to work either. Here is a sample page that I would like to have treated in this way: http://tinyurl.com/o9p2fgp

Really would appreciate a push in the right direction.

Thanks in advance

Old Nov 30, 2013, 04:07 PM
juggledad's Avatar
22,604 posts · Mar 2009
OSX 10.10.1 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
If you can't find a plugin to do this, you need to look at the code to see how it is doing it.

The only way someone could tell you is if they look at the code and spend a 'bit' of time figuring it out, then spending a 'bit' more time writting up so you would understand it.

If you can't figure it out, you may need to hire someone to help you. I've never looked at that code and could not tell you how it worked. Maybe someone else will decide to take the time and dig in to help you.
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Old Nov 30, 2013, 04:11 PM
8 posts · Aug 2013
Thanks for the reply and suggestion.

I guess if i could find where the code is i could at least take a look. I couldn't find where it was located. Any ideas?
Old Jan 13, 2014, 11:21 PM
CrouchingBruin's Avatar
220 posts · Aug 2010
Santa Monica, CA
I believe I have come up with a solution by cloning some of the code used to process the blog thumbnails.

Add this JavaScript to the custom code section of Montezuma (Appearance > Montezuma Options > Head > Insert Code > Bottom):
function image_fade() {
	jQuery('.image-fade img').each(function(){
		var el = jQuery(this);
		.wrap("<div class='img_wrapper' style='display:block'>")
				var el = jQuery(this);
				el.parent().css({'width':this.offsetWidth,'height':this.offsetHeight });

jQuery(window).load(function() {
	if( jQuery(window).width() > 959 ) {

	// Transition image 
	if( $(window).width() > 959 ) {
		// Add hover event for images
			function(){ $(this).find('.img_grayscale').stop().animate({opacity:0}, 1000).next().stop().animate({opacity:1}, 700); },
			function(){ $(this).find('.img_grayscale').stop().animate({opacity:1}, 1000).next().stop().animate({opacity:0}, 700); }
		// Remove the default behavior for mouse-over into the post on single post pages & pages
		$('.page .hentry').unbind("hover");
		$('.single-post .hentry').unbind("hover");
	} else {
		$('.image-fade img').css('opacity', 1);
Then modify the two CSS rules below, which are found in the post.css virtual CSS file, by adding the selectors shown in red:
.post-thumb img,
.image-fade img {
	-webkit-filter: 		grayscale(0);
	opacity: 				0; 
	filter: 					alpha(opacity=0); 
	-ms-filter: 			"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	display:					block;

.post-thumb img.img_grayscale,
.image-fade img.img_grayscale
	filter: 					grayscale(100%); /* Current draft standard */
	-ms-filter: 			grayscale(100%); 
	-o-filter: 				grayscale(100%); /* opera */ 
	filter: 					url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */
	filter: 					gray; /* IE */
	-webkit-filter: 		grayscale(1); /* Old WebKit */
	-webkit-filter: 		grayscale(100%); /* New WebKit */
Now, when you have an image on a static (non-blog) page where you want to have the color transition effect, enclose it in a container (like a DIV, although it could also be an anchor/link tag) that has a class of image-fade:
<div class="image-fade"><img src="/images/logo.jpg" /></div>
The image should show up in grayscale, and turn to color when the mouse is moved over it. You can also add other styling options to the image-fade class in one of the virtual CSS files.

An example can be seen here.

Edit: I just noticed that for some reason, it's not working in Firefox, but seems to work in Chrome and IE. I'll need to dig into it.

Edit 2: It seems to work on my other sandbox site under all browsers; I must have hosed the original one, I'll have to refresh the installation.
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Last edited by CrouchingBruin; Jan 14, 2014 at 09:28 AM.
Old Sep 10, 2014, 03:32 PM
8 posts · Aug 2013
@CrouchingBruin Thank you so very much. I really appreciate your help.


css3, image styling, transitions

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
will header images do Javascript rotation and crossfade with a random order of images adamslc8 Header configuration & styling 3 Oct 14, 2011 01:58 PM
[SOLVED] Background graphic file loads first in page transitions windhover4 Atahualpa 3 Wordpress theme 7 Apr 11, 2011 12:48 PM
Header Images - One fixed image for Home Page - Rotate all images on all other pages? ClearlyRobert Header configuration & styling 10 Oct 12, 2010 01:12 PM
Rotating Images on Homepage with Static Images on Other Pages chainpin Header configuration & styling 0 Sep 7, 2010 08:32 PM

All times are GMT -6. The time now is 12:46 PM.

Powered by vBulletin® Copyright ©2000 - 2015, Jelsoft Enterprises Ltd.