if(navigator.userAgent.indexOf("Trident")>0){ $(".iframe iframe").mouseover(function(){ $(this).parents(".iframe").toggleClass("hover"); }); $(".iframe iframe").mouseout(function(){ $(this).parents(".iframe").toggleClass("hover"); }); }
.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; overflow:hidden; position:relative; width:300px; transition: all 0.5s ease-in-out 0s; } .iframe iframe { width:100%; height:100%: } .iframe:hover, .iframe.hover { width:100%; }
<div class="iframe"> <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> </div>