Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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)

2011-10-13

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.

2011-10-13

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

2011-10-13

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');

});
});

2011-10-13

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 !