Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Folded Corner

    @sudhanshu.tripathi
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 266
    Comment on it

    Hello Everyone!!

    When the mouse is over the image or block  then the  side of the appeared. It use transition and position properties of  css. Transition will takes place when the hover effect is apply on image block,positions and box shadow are use for visual folded corner effect.

    HTML:-

    <body>
<div class="box">
    <img src="images/image1.png"/>
        <div class="section progress">
            <h4>
                <a href="#">Div Before</a>
            </h4>
            <div class="met">
                <div class="meter">
                    <span style="width: 75%"></span>
                </div>
            </div>
           </div>
</div>
<div class="box"><img src=".." />
        <div class="section progress">
            <h4>
                <a href="#">Div After</a>
            </h4>
            <div class="met">
                <div class="meter">
                    <span style="width: 75%"></span>
                </div>
            </div>
        </div>
        <div class="sub_section">
            <ul class="list">
                <li>Item 1</li>
                <li class="last">Item 2</li>
            </ul>
        </div>
</div>
</body>

    CSS:-

    .boxes {
width: 100%;
padding: 1%;
}

.box {
width: 20%;
padding: 1%;
background: #fff;
box-shadow: 2px 3px 3px 0px #e9e9e9;
display: inline-block;
margin-top: 1em;
}

.box img {
margin-bottom: 1%;
}

.progress a {
margin: 0;
padding: 0;
color: #999;
text-decoration: none;
}

.met {
margin: -1em 0 0 0;
padding: 0;
background: #c0c0c0;

}
.accordion .progress .meter {
background: #555;
width: 100%;
position: relative;
}

.meter > span {
height: 10px;
display: block;
background-color: #777;
position: relative;
overflow: hidden;
}

.sub_section {
margin-top: 1em;
border-bottom: none;
}

.list {
padding: 0;
margin: 0;
}

.list li {
background: #dcdcdc url('../') no-repeat;
font-size: 11px;
color: #999;
list-style: none;
padding: 1.3em 1em 1.3em 4.5em;
margin-bottom: 5px;
}

.list .last {
border-bottom: none;
}

    OUTPUT:-

    Folded Corner
    position transition Shadow
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: