Take the 2-minute tour ×

I want effect like http://www.findawayworld.com/ when you mouseover any box.

Here is my code:

    jQuery('.category-image-block').mouseover(function() {
                jQuery(this).stop().fadeTo(400, 0.9);
                jQuery(this).children(".category-image-block     div").stop().fadeTo(400, 1);

        jQuery('.category-image-block').mouseout(function() {
            jQuery(this).stop().fadeTo(400, 1.0);
            jQuery(this).children(".category-image-block div").hide();

        jQuery(".category-image-block div").hide();

The effect is coming but its not giving proper effect.

My div with class 'category-image-block' contains image and another hidden div with class'contenthover'. Hidden div has p tags with text in it. Using above code, some blinking (for less than 1 sec) is happening when I mouseover p tag. Effect is not smooth as it should be. Any suggestion ?

share|improve this question
why I are you hidding it like this jQuery(".category-image-block div").hide(); outside of the mouse over/out events? Also post the html and maybe the css that goes with that –  Bogdan Jul 28 '12 at 12:47
I think you need to set up a fiddle, as that would make it a lot easier for us to see the actual problem. –  adeneo Jul 28 '12 at 12:48
They are doing that effect as follows: Create a div with 2 children (img and div containing text elements). Then they absolute position the img element and place it first in order call, then use hover fade effect on parent to child div. I'll try and put a fiddle up and show you. –  SpYk3HH Jul 28 '12 at 12:55

3 Answers 3

Here's the way I would solve it:


Having an inner div, that's absolute to the category-image-block makes this effect easier to obtain.


share|improve this answer

I'd do this:

$('.category-image-block').on('mouseenter mouseleave', function() {
    $(this).children(".category-hover-block").stop(true, true).fadeToggle(400);


share|improve this answer

Here is almost an exact example of what they have. As I noted in comment before, pay careful attention to the css and where the element are in layout.

ALSO: scroll onto bottom of this answer for pure CSS solution (saving you time and space)


<div id="parent" class="parent">
    <img id="background" class="background" src="http://www.findawayworld.com/scraps/icecream1-310x180.jpg">
    <div id="child" class="child">
        <h3>Some Title Here</h3>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere rutrum mollis. Vestibulum iaculis felis a felis interdum dictum. Duis quam ipsum, dictum in mollis nec, bibendum vel mauris.


.parent {
    -moz-border-radius: .5em;
    border-radius: .5em;
    border: 3px groove #33FFFF;
    height: 180px;
    margin: 1em auto;
    position: relative;
    width: 310px;
.background {
    left: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;
.child {
    background: #fff;
    display: none;
    height: 100%;
    width: 100%;
    z-index: 1;
.child h3 {
    font-size: 1.3em;
    text-align: center;
.child p {
    margin: 1em auto;
    padding: 0px 1em;
    text-align: justify;


$(function() {
    $("#parent").hover(function(eIn) {
        $("#child").stop(true, true).fadeIn("slow");
    function(eOut) {
        $("#child").stop(true, true).fadeOut("slow");

the jsFiddle


Keep in mind that this exact effect could be COMPLETELY achieved in css, thus creating a MUCH smaller footnote for your javascript. I will try to get a CSS2 and CSS3 example up shortly.


I used the same jsFiddle for this solution (i just didn't set the modified as base, so you'll find it under modify 22). So there is one line of exception css as noted in the css below. I also commented out the JavaScript to show it is a pure CSS solution that should even have some IE compatibility.

CSS (*changes only*)

/* Below used for pure CSS solution */
.child {
    display: block !important; /* simply to override previous css without making change for looking at js version */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
.parent:hover .child {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */
    filter:alpha(opacity=100); /* IE 4, 5, 6 and 7 */
/* End Solution */

the jsFiddle

share|improve this answer

Your Answer


