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.

CSS3: Flexbox and block content

This entry is part 7 of 13 in the series CSS3

Flexbox helps us to put our content into block form.

Flexbox consists of flex-container.  It also consists of flex-items, the children of flex-container.

The display property is set to flex or inline-flex. Inline-flex will put the content into inline block form.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Flexbox</title>
    <style>
        #flex-container {
            display: -webkit-flex;
            display: flex;
            width: 500px;
            height: 500px;
            background-color: Navy;
        }

        #flex-item {
            background-color: Silver;
            width: 200px;
            height: 200px;
            margin: 20px;
        }
    </style>
</head>
<body>
<div id='flex-container'>
    <div id='flex-item'>I am content block A</div>
    <div id='flex-item'>I am content block B</div>
</div>
</body>
</html>

 

CSS3: Flexbox and image alignment

This entry is part 8 of 13 in the series CSS3

We usually will have a block of text with an image besides the content.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Flexbox</title>
    <style>
        #flex-container {
            display: -webkit-flex;
            display: flex;
            width: 500px;
            height: 500px;
            background-color: gray;
        }

        #flex-item {
            background-color: Silver;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
<div id='flex-container'>
    <div id='flex-item'>I am content block A</div>
    <div id='flex-item'><img src='https://codecrawl.com/code/images/ushuaia.jpg' alt='Ushuaia' width='200px' height='200px'/></div>
</div>
</body>
</html>

CSS3: Align the flex-items at center

This entry is part 9 of 13 in the series CSS3

Using a single line of justify-content: center will position the Flex Items at the center along the Main axis.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Flexbox</title>
    <style>
        #flex-container {
            display: -webkit-flex;
            display: flex;
            width: 500px;
            height: 500px;
            background-color: gray;
            justify-content: center;
        }

        #flex-item {
            background-color: Silver;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
<div id='flex-container'>
    <div id='flex-item'>I am content block A</div>
    <div id='flex-item'><img src='https://codecrawl.com/code/images/ushuaia.jpg' alt='Ushuaia' width='200px' height='200px'/></div>
</div>
</body>
</html>

The other values that can use to align the items at main axis are: