the mouse on the box and then change the shape

.box
{
border-radius:6px;
background:#666;
transition-property:background,border-radius;
transition-duration:2s;
transition-time-function:linear
}

.box:hover
{
background:#333;
border-radius:50%;
}

  

the mouse on the box and then change the shape

image slider hover

.accordian {
    width: 805px; height: 320px;
    overflow: hidden;
   
    /*Time for some styling*/
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
    width: 2000px;
    /*This will give ample space to the last item to move
    instead of falling down/flickering during hovers.*/
}

.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;
   
    border-left: 1px solid #888;
   
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
   
    /*Transitions to give animation effect*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    /*If you hover on the images now you should be able to
    see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}

<div class="accordian">
    <ul>
        <li>
            <div class="image_title">
                <a href="#">KungFu Panda</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">Toy Story 2</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">Wall-E</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">Up</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">Cars 2</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
            </a>
        </li>
    </ul>
</div>


.accordian li img {
    display: block;
}

/*Image title styles*/
.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0; bottom: 0;   
width: 640px;   

}
.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
}

Search Field

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="search-field&gt;&lt;/div&gt;

.search-field
{

width:200px;
border:4px #333 solid;
border-radius:25px;
background:#666;
padding:5px;

 -webkit-transition:  width 0.7s;
  -moz-transition:     width 0.7s;
  -o-transition:       width 0.7s;
  transition:          width 0.7s;
}
.search-field:focus {
  width:400px;
}

Traffic light

/* HTML Coding */


<div class="trafficlight">
<span class="light1"></span>
 <span class="light2"></span>
<span class="light3"></span>
</div>

/* CSS Code */


.traffic
{
    background:#333;
    height:300px;
    width:150px;
    border-radius:30px;
    margin:3em auto;
    position:relative;
    padding-top:12px;
    border:2px #666 solid;
    top: -1px;
    left: 3px;
}
.traffic span
{
    margin:20px auto;
    display:block;
    width:65px;
    height:65px;
    border:4px solid #777;
    border-radius:50px;
    box-shadow:5px 10px 20px rgba(0,0,0,.5),inset 0px 10px 10px 0px;
}

.light1
{
 
    background:#300;
     animation:redlight 25s infinite;
}

.light2
{
    background:#430;
     animation:orangelight 25s infinite;
}
.light3
{
    background:#030;
    animation:greenlight 25s infinite;
}

@keyframes greenlight
{
0%{background: #030;}
5%{background:#030;}
45%{background:#13b420;}
50%{background: #030;}
100%{background: #030;}
}

@keyframes orangelight
{
0%   {background:#430;}
45%  {background:#430 ;}
55%  {background:#fc0;}
60%  {background:#430;}
100% {background: #430;}
}
@keyframes redlight
{
0%   {background:#300;}
55%  {background:#300 ;}
60%  {background:#f00;}
95%  {background:#f00;}
100% {background: #300;}
}



.light1, .light2, .light3
{
    animation-duration:4s;

}