Css

How to create animated border over image using css?

How to create animated border over image using css?, someone asked me to explain?
By:
Css

We can set multiple css properties to create animation border over image using css. We can set the transitions for width, height, background-color, transform. Hover over the image to see the animation with a period of time with changes take effect immediatly.

 Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated borderover image using css</title>
    <style type="text/css">
        .box {
            border-width: 1px;
            display: block;
            width: 0px;
            height: 79px;
            transition: width 2s, height 2s, background-color 2s, transform 2s;
        }
            .box:hover {
                width: 338px;
                height: 79px;
                -webkit-transform: translate(180deg);
                transform: translate(180deg);
                border-style: solid;
            }
    </style>
 </head>
<body style="border: 1px solid #DED8D8; width: 500px;height:250px">
    <h2 style="color: #00BCD4;">Animated border over image usingcss</h2>
    <p>hover over the logo image to seeanimated border.</p>
    <div class="box">
         <img src="http://www.infinetsoft.com/Images/logoinfi.png" alt="logo">
    </div>
</body>
</html> 

Output:

Animated border over image using css

Related Article

Post your comments / questions



Recent Article