Edit in JSFiddle

.iframe {
    border:2px solid #9AC460;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
    border-top-right-radius: 200px;
    box-shadow: 2px 2px 10px #CCC;
    width:300px;
    transition: all 0.5s ease-in-out 0s;
}

.iframe:hover {
    width:100%;
}

<iframe class="iframe" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2514.0505601602795!2d6.958280999999999!3d50.941278!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bf25a5369c3d2f%3A0x29ec913896e3a9c6!2sK%C3%B6lner+Dom!5e0!3m2!1sde!2s!4v1395779803264" width="400" scrolling="no" height="300" frameborder="0" marginwidth="0" marginheight="0"></iframe>