# VBForums CodeBank > Codebank - Cascading Style Sheets (CSS) >  [CSS] Folded Corner Effect With Animations

## XcodeX

HTML :



```
<div class="post"> 
    <span class="folded-corner"></span> 
    this is an animated foldover demo 
</div> 

<div class="post photo"> 
    <span class="folded-corner"></span> 
    <img src="http://i.imgur.com/w8be8.jpg"> 
</div>
```


CSS:



```
body { 
   width: 240px; 
   margin: 0px auto; 
   padding: 40px 0 0; 
   background-color: #fff; 
   font-family: Verdana, sans-serif; 
   font-size: 11px; 
} 

a {color: #000;} 

.post { 
   margin: 0px 0px 40px; 
   padding: 15px; 
   position: relative; 
   background-color: #fff; 
   -webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
   -moz-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
   box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
} 
.photo {padding: 0px!important;} 
.folded-corner { 
   width: 0px; 
   height: 0px; 
   position: absolute; 
   top: -1px; 
   right: -1px; 
   border-width: 0; 
   border-style: solid; 
   background: hsla(260,5%,60%,0.2); 
   -webkit-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   -moz-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   -webkit-border-bottom-left-radius: 15px; 
   -moz-border-radius: 0 0 0 15px; 
   border-radius: 0 0 0 15px; 
   border-color: #fff #fff transparent transparent; 
   -webkit-transition: border-width 0.2s ease-out; 
   -moz-transition: border-width 0.2s ease-out; 
   -ms-transition: border-width 0.2s ease-out; 
   -o-transition: border-width 0.2s ease-out; 
   transition: border-width 0.2s ease-out; 
} 
.post:hover .folded-corner {border-width: 0 40px 40px 0;} 
.photo .folded-corner {background: hsla(260,5%,75%,0.5);}
```

My first post hope every one likes it 

U can check my code with this online compiler have fun friends  :Wink:

----------


## akhileshbc

That's cool  :Thumb: 

I think this should be in CodeBank  :wave:

----------


## manandpc

That code is not complete if you dont put the HTML code for TESTING

here is a simple Animation.html



```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Animation</title>
</head>
<style type="text/css" id="animation_css"> 

body { 
   width: 240px; 
   margin: 0px auto; 
   padding: 40px 0 0; 
   background-color: #fff; 
   font-family: Verdana, sans-serif; 
   font-size: 11px; 
} 

a {color: #000;} 

.post { 
   margin: 0px 0px 40px; 
   padding: 15px; 
   position: relative; 
   background-color: #fff; 
   -webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
   -moz-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
   box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
} 
.photo {padding: 0px!important;} 
.folded-corner { 
   width: 0px; 
   height: 0px; 
   position: absolute; 
   top: -1px; 
   right: -1px; 
   border-width: 0; 
   border-style: solid; 
   background: hsla(260,5%,60%,0.2); 
   -webkit-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   -moz-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   -webkit-border-bottom-left-radius: 15px; 
   -moz-border-radius: 0 0 0 15px; 
   border-radius: 0 0 0 15px; 
   border-color: #fff #fff transparent transparent; 
   -webkit-transition: border-width 0.2s ease-out; 
   -moz-transition: border-width 0.2s ease-out; 
   -ms-transition: border-width 0.2s ease-out; 
   -o-transition: border-width 0.2s ease-out; 
   transition: border-width 0.2s ease-out; 
} 
.post:hover .folded-corner {border-width: 0 40px 40px 0;} 
.photo .folded-corner {background: hsla(260,5%,75%,0.5);}

</style> 

<body>

<div class="post"> 
    <span class="folded-corner"></span> 
    this is an animated foldover demo 
</div> 

<div class="post photo"> 
    <span class="folded-corner"></span> 
    <img src="http://i.imgur.com/w8be8.jpg"> 
</div>

</body>

</html>
```

----------


## mrduongonline1

why when I gif image on it does not work?

----------

