how did they do that

Posted on 2011-10-11
Last Modified: 2012-05-12
Client likes how the below site has the thumbs and you can scroll over to get bigger image displayed. (they don't need the copy included in bigger image)

I used to be able to do this with behaviors and tables but am not sure how to do it with css.  Is there a software out there I can buy that would help do this, or perhaps a website with a tutorial?
Question by:nsitedesigns
    LVL 9

    Accepted Solution

    This looks like a simple rollover image - when the mouse goes over the image it just changes it to another one...
    It's easy to do in Dreamweaver as it creates the Javascript code for you, and there's a tutorial here for it:
    LVL 42

    Assisted Solution

    by:Rob Jurd, EE MVE
    the zoom is actually the bottom half of the image.  only the top half is displayed initially and then the bottom half.  

    It's pure CSS using :hover on the image

    .goods:hover img {
    margin-top: -370px;

    Open in new window

    see here for a demo

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Suggested Solutions

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now