Experimenting with transitions

by secretgspot

HTML

<a href="#"></a>

<img src="http://lorempixel.com/50/50/" alt="">

CSS

body {
    padding: 50px;
}
a {
    background: url('http://lorempixum.com/50/50/');
    border-radius: 25px;
    box-shadow: inset 0 0 0 25px hsla(0,0%,0%,.75);
    display: block;
    height: 50px;
    margin-bottom: 50px;
    overflow: hidden;
    width: 50px;
    -webkit-transition: all .5s ease;
}
a:hover {
    box-shadow: inset 0 0 0 2px hsla(0,0%,0%,.75);
}
img {
    border-radius: 5px 25px 5px 25px;
    -webkit-transition: border-radius .5s ease;
}
img:hover {
    border-radius: 25px 5px 25px 5px;
}