Monday, December 12, 2011

A CSS3 only solution to show and enlarge a thumbnail layer

One of the websites that I have built shows a gallery of book cover thumbnails. Each thumbnail represents a cookbook whose content and layout can be modified by its author. A thumbnail displays a cookbooks actual cover layout, and is a minimized version of a larger cover layout defined in HTML.

There are two HTML definitions for each book cover: one for the full cover, one for the thumbnail. The reason for this is that it is impossible to create a thumbnail of HTML in HTML (or even JavaScript) dynamically. That is, until the support of CSS3 features by all modern browsers.

If a book cover definition in HTML could be rendered to an image by the web server, creating a smaller version (of the image) would be easy. Unfortunately, I have not been able to find a server-side HTML renderer that meets my requirements. There are projects that look very promising but that will probably never succeed in keeping up-to-date with the latest CSS and HTML specifications.

The primary purpose of a web browser is HTML rendering. What if a browser could request a full book cover in HTML, resize it to a thumbnail and enlarge it again when the thumbnail is hovered? For that we need the following CSS3 features. I have mainly tested them in Chrome (version 15), therefore they are prefixed with the '-webkit-' prefix:
-webkit-transform
-webkit-transform-origin
-webkit-transition

And now, finally, an example. Here is the HTML source code for a cookbook cover that is initially scaled down to 30% of its size, and enlarged to 60% of its size when hovered. The transition effects have been added to make things run more smoothly. If you want you can view this example in action (in the latest version of the Chrome browser).

<!DOCTYPE html>
<html>
<head>
    <title>Cooking with chilies</title>
    <style type="text/css">
        #Cover
        {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 800px;
            height: 1000px;
            background: White;
            -webkit-transform-origin: left top;
            -webkit-transform: scale(0.30);
            -webkit-transition: all 0.75s ease-in 0;
        }
        #Cover:hover
        {
            cursor: pointer;
            -webkit-transform: scale(0.60);
            -webkit-transition: all 0.75s ease-out 0;
        }
    </style>
</head>
<body>
    <div id="Cover">
        <div style="position: relative; width: 800px; height: 684px; background-image:
            url(Chilies.jpg)">
            <div style="position: absolute; left: 265px; top: 484px">
                <img src="Plate.png" alt="Plate" />
            </div>
        </div>
        <div style="position: relative; height: 230px; background-color: #c35925">
            <div style="padding-left: 50px; padding-top: 40px; font-family: Lucida Sans
                    Unicode; font-size: 45px; color: #ffffff">
                Cooking with chilies
            </div>
            <div style="margin-left: 50px; margin-top: 10px; font-family: Lucida Sans
                    Unicode;font-size: 35px; color: #3a3a3b">
                By: A spice lover
            </div>
        </div>
        <div style="position: relative; height: 86px; background-color: #990000">
        </div>
    </div>
</body>
</html>

No comments:

Post a Comment