Question

Well, I’ve almost achieved what I was aiming for. There’s an image and when hovered, a div fades over with text and background. The problem is when the user hovers the “new” div (text and background).

Here’s the HTML:

<div id="wrap">
        <div class="admin">
            <div class="admin-img">
                <img src="http://lorempixum.com/g/210/210/abstract" />
            </div>
            <div class="admin-txt">
                <h2>Name</h2>
                <p>Job description</p>
            </div>
        </div>
        <div class="admin">
            <div class="admin-img">
                <img src="http://lorempixum.com/g/210/210/nature" />
            </div>
            <div class="admin-txt">
                <h2>Name</h2>
                <p>Job description</p>
            </div>
        </div>
        <div class="admin">
            <div class="admin-img">
                <img src="http://lorempixum.com/g/210/210/sports" />
            </div>
            <div class="admin-txt">
                <h2>Name</h2>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/city" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/nightlife" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/people" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/food" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/animals" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
    </div> 

Here’s the jQuery I used:

$(document).ready(function() {
    $("div.admin-img").hover(
        function () {
            $(this).siblings('.admin-txt').stop(true,true).fadeIn(100);
        },
        function () {
            $(this).siblings('.admin-txt').stop(true,true).fadeOut(100);
        });
    $("div.other-img").hover(
        function () {
            $(this).siblings('.other-txt').stop(true,true).fadeIn(100);
        },
        function () {
            $(this).siblings('.other-txt').stop(true,true).fadeOut(100);
        }); 
});

How can I make it better?
And, on small images, how can I make the background cover the whole image?

Thanks in advance,
Dani.

Answer 1

http://jsfiddle.net/p8gWf/

Changes made on the javascript portion.