View Full Version : jQuery hide image upon mouseover

03-21-2011, 10:53 PM

What I want to do:

I have a img tag, which I want to fade out upon mouseover, showing the text underneath it, and then fade in upon mouseout behaviour.

The following is the code:

<div id="box1" class="rollover1" style="background:#d61c5c;">
<img src="uploads/images/box1.jpg" width="147" height="147" alt="About Us" class="fade"/>
<a href="#"><div id="rollover_text"><strong>ABOUT US</strong><br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br /><br /><p align="right"><u>More</u></p>

With the following jQuery code:

$(document).ready(function () {
$(this).fadeTo("slow", 0);
$(this).fadeTo("slow", 1);

What is actually happening is this:
Upon mouseover, it does successfully fades out the image, but it doesn't show the text underneath it, only the background colour of the div.

What I think might be happening is that the fadeout behaviour is simply decreasing image opacity, instead of removing it altogether. But even if this is what it's doing, it should still show the text in the background div.

What am I doing wrong, and how can I achieve the desired results?

Thanks in advance!


03-21-2011, 11:27 PM
There is no text in the background behind the image ... there is text underneath the image. If you fade out the image, the text will not "move up" to replace the image.

The text would move up if you use hide() and show() ... but then the hover will not work any longer (it will repeatedly show and hide because the mouse cursor will eventually leave the image when the image is being hidden which will result in it being shown again and so on).

The only solution (or rather workaround) I see would be to work with position: absolute for the div and the img and then set the image to a high z-index to cover the text in the div.

03-22-2011, 12:21 AM
One option without jQuery.

As the image fades out, the text underneath fades in and vice-versa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#imgContainer {
position: relative;
#img1 {
opacity: 100;
position: absolute;
top: 0px;
left: 0px;
#imgContainer div {
position: absolute;
top: 0px;
left: 0px;
<script type="text/javascript">
var speed = 0.2;
var fadeTimerImg, fadeTimerTxt;
function fade(obj,dir){
fadeTimerImg = setInterval(function(){setOpacity(obj,dir)},100);
fadeTimerTxt = setInterval(function(){setOpacity(oTxtContainer,-dir)},100);
function setOpacity(obj,dir) {
obj.curOpac = obj.curOpac + (speed * dir);
if(obj.curOpac < 0){obj.curOpac = 0;}
if(obj.curOpac > 10){obj.curOpac = 10;}
if(typeof(obj.style.opacity) == 'string'){
obj.style.opacity = obj.curOpac/10;
} else {
obj.style.filter = 'alpha(opacity=' + obj.curOpac*10 + ')';
var oImg1 = document.getElementById('img1');
oImg1.curOpac = 10; //10 = opaque
oTxtContainer = document.getElementById('txtContainer');
oTxtContainer.curOpac = 0; //0 = transparent
oImg1.onmouseover = function(){fade(this,-1);}
oImg1.onmouseout = function(){fade(this,1);}
<div id="imgContainer">
<div id="txtContainer">
some text<br />
more text <br />
some more text
<img id="img1" src="num1.jpg" alt="" />

07-10-2011, 01:22 PM
I love this bit of Code Bullant

I am also new to Javascrpt...

I was wondering it i had more than one fading picture on a page would this code work? If not how do I go about adapting it?

Thanks George