[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

how did they do that

Posted on 2011-10-11
2
Medium Priority
?
354 Views
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?

http://29agency.com/
0
Comment
Question by:nsitedesigns
2 Comments
 
LVL 9

Accepted Solution

by:
Scottyworld earned 1000 total points
ID: 36952493
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:
http://webdesign.about.com/od/dreamweaverhowtos/ss/dw-rollover-img.htm
0
 
LVL 43

Assisted Solution

by:Rob
Rob earned 1000 total points
ID: 36953220
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

http://jsfiddle.net/rjurd/mZGyd/
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month18 days, 20 hours left to enroll

834 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