Thumbnail rollovers WordPress
- SOLVED
I'm using a modified version of this theme, http://wpshower.com/themes/sight/
I'm trying to have the thumbnail photos on the front page show a transparent black bar and title link on top of the thumbnail when rolled over. But no matter what I've tried, I can not get the thumbnail to stay visible.
Here is the site:
http://bit.ly/qxsHg7
I'm pretty sure it has something to do with this code
.mouseenter(function(){
$(this)
.find('.thumb').hide()
.css('z-index','-1');
})
.mouseleave(function(){
$(this)
.find('.thumb').show()
.css('z-index','1');
});
Answers (4)
designchemical answers:
Hi,
Add the following CSS:
.grid .post h2 {
position: absolute; top: 4px; left: 4px; display: none; z-index: 2; width: 170px; padding: 10px; background: #444;
}
Can change the background to a different colour or replace with a semi-transparent image
Remove the following jquery from the script.js file:
$('#loop').find('.post')
.mouseenter(function(){
$(this)
.find('.thumb').hide()
.css('z-index','-1');
})
.mouseleave(function(){
$(this)
.find('.thumb').show()
.css('z-index','1');
});
Replace it with the following:
$('#loop').find('.post').hover(
function(){$('h2',this).fadeIn();},
function(){$('h2',this).fadeOut();
});
Chris H comments:
Yes. This worked. Thank you.
Linda answers:
Hi, when I rollover your image this:
<a href="http://blog.adesa.com/test/post-5" class="thumb" style="display: inline; z-index: 1; "><img width="190" height="190" src="http://blog.adesa.com/test/wp-content/uploads/2011/09/airplane-iStock_000004916707Small-290x290.jpg" class="attachment-thumbnail wp-post-image" alt="Are Your Customers Always Right?" title="Are Your Customers Always Right?"></a>
changes to
<a href="http://blog.adesa.com/test/post-5" class="thumb" style="display: none; z-index: 1; "><img width="190" height="190" src="http://blog.adesa.com/test/wp-content/uploads/2011/09/airplane-iStock_000004916707Small-290x290.jpg" class="attachment-thumbnail wp-post-image" alt="Are Your Customers Always Right?" title="Are Your Customers Always Right?"></a>
Maybe the display: none is what is causing the problem. I'm looking in your css to see where is it pulling from.
Linda
Sébastien | French WordpressDesigner answers:
.mouseenter(function(){
$(this)
.find('.grid .post').hide()
.css('z-index','-1');
})
.mouseleave(function(){
$(this)
.find('.grid .post').show()
.css('z-index','1');
});
your target is .thumb in this code.
that's the error
your target must be the black container only
your target must be .grid .post
Chris H comments:
That does the same thing
Sébastien | French WordpressDesigner comments:
your target is .thumb in your code.
that's the error
your target must be the black container only : .grid .post
your target must be .grid .post
and probably it's better like that
jQuery(document).ready(function($){
$('.grid .post').mouseenter(function(){
$(this)
.find('.thumb').hide()
.css('z-index','-1');
});
$('.grid .post').mouseleave(function(){
$(this)
.find('.thumb').show()
.css('z-index','1');
});
});
Julio Potier answers:
The problem is not here, in fact you got our image and below the image, the white/black square.
So when the image is hidden, the square comes in the right place. This is ugly :/
I can modify the code to set a real CSS hover, functionnally.
Send me (by private message) a FTP acces and/or admin access.
Thank you !