Grow your CSS skills. Land your dream job.

is there a plug-in to mimic this behavior?

  • # April 3, 2012 at 9:14 pm

    is there a plug-in to mimic this swap out behavior I created in Dreamweaver?

    http://www.revannielawrence.com/html/testimonials.html

    # April 4, 2012 at 6:22 am

    Hi @kloy!

    There really isn’t a need for a plug-in to accomplish that effect. In fact, you can use css only. Here is an example of one image; start with this HTML



    and apply this css

    /* target the thumbnail block */
    #photogrid a, #photogrid img {
    display: block;
    width: 80px;
    height: 80px;
    }

    /* each thumbnail will need a definition like this */
    a.img2 {
    background: url(http://www.revannielawrence.com/al_thumbs_test_02.jpg)
    }
    a.img2:hover img {
    display: none;
    }
    # April 4, 2012 at 9:29 am

    oh, ok…does that work with an entire div with text content as well?

    # April 4, 2012 at 2:26 pm

    I wish CSS would allow you to hover one element and change another, but js is need for that.

    I don’t know of a plug-in but it isn’t hard to write something that will do this.

    # April 4, 2012 at 4:32 pm

    @kloy You can do the same thing with a link wrapping a div with content, the only limitation I can think of is that in older version of IE, using the :hover selector only works on links.

    # May 28, 2012 at 7:43 pm

    I’m still confused about this. I don’t need to hide the thumbnail. I need to hide the divs, each with a photo and some text.

    When the user clicks on the corresponding thumbnail, the div will be revealed.
    Only 1 div will be visible at any given time.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".