CSS3: Animated image zoom on mouse hover

This entry is part 6 of 13 in the series CSS3

We take a thumbnail photo and animate it to show its full size.

The CSS code here uses a combination of rotate and scale to achieve the animation effects.

This is done without the use of Javascript.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Transform</title>
    <style>
        body {
            padding: 100px;
            text-align: center;
        }

        img {
            background: #fff;
            border: 1px solid #BFBFBF;
            display: block;
            float: left;
            height: 125px;
            margin: 0 10px 0 0;
            padding: 5px;
            width: 125px;
            position: relative;
            -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
        }

        img:hover {
            -webkit-transform: rotate(10deg) scale(2);
            -moz-transform: rotate(10deg) scale(2);
            -o-transform: rotate(10deg) scale(2);
            -ms-transform: rotate(10deg) scale(2);
            transform: rotate(10deg) scale(2);
        }
    </style>
</head>
<body>

<img src='https://codecrawl.com/code/images/ushuaia1.jpg' alt='Ushuaia'/>

</body>
</html>

The line

position: relative

means that the image position is relative to its parent tag which is the <body> tag.

With the transition statements in line 21,22,23, the animation will be done in a second.  Without these transition effects, it will move to its final position immediately.

jQuery Mobile: Transitions

This entry is part 11 of 73 in the series jQuery Mobile

To move from page to page, jQuery Mobile provides a few CSS-based transition effects that you can apply to a page link.

Some of the common transitions are flip, slide and pop.

The transition effects were first implemented by David Kaneda in jQTouch and jQuery Mobile has adapted it and built the effects into jQM.

To apply flip transition effect, we only have to add data-transition=’flip’  to the page link line.

The line would be:

<a href='#pagetwo' data-transition='flip' data-role='button'>Click Me</a>
Transitions
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Your page one content here</p>
        <a href='#pagetwo' data-transition='flip' data-role='button'>Click Me</a>
    </div>
</div>
<div data-role='page' id='pagetwo'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>You are at page two!</p>
        <a href='#pageone' data-role='button'>Go Back</a>
    </div>
</div>
</body>
</html>
Try The Code

For a complete demo of jQM transition effects, you can refer to the official jQM site.

jQuery Moble: Page movement

This entry is part 8 of 73 in the series jQuery Mobile

In this post, we first learn how to define a second page.  This is done by:

<div data-role='page' id='pagetwo'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>You are at page two!</p>
        <a href='#pageone' data-role='button'>Go Back</a>
    </div>
</div>

We create another div with data-role=’page’.  We also need to put an id to this page.

Since this app will only keep cycling between pageone and pagetwo, we have a href pointing back to pageone in line 21 below.

There are 2 data-roles with page attributes in lines 10 and17.

The whole code structure is as below:
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Your page one content here</p>
        <a href='#pagetwo' data-role='button'>Click Me</a>
    </div>
</div>
<div data-role='page' id='pagetwo'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>You are at page two!</p>
        <a href='#pageone' data-role='button'>Go Back</a>
    </div>
</div>
</body>
</html>
Try The Code

You can try running the script here.