Internet Explorer - image scale on hover bleeds

Question

I have:

• A panel
• It contains an image
• A bottom container inside the image as an overlay
• Some content

When hovering over the panel, the image scales to 1.1. This works perfectly fine. However, as the image scales, it can be see quickly on the outside and under the overlay.This works seamlessly on Chrome and appears to be an issue in Internet Explorer .

Question Is it possible to ensure the same behaviour as chrome where the image doesn't expand outside of it's own container and onto the sides / bottom of the overlay?

 .item { width: 100%; height: 500px; float: left; background: #ebebeb; overflow: hidden; } .item .content { width: 100%; font-family: "Segoe UI"; padding: 20px; } .item .image { width: 100%; height: 300px; float: left; background: red; overflow: hidden; position: relative; } .item .image img { width: 100%; transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; border: none; outline: none; box-shadow: none; } .item .border { width: 150%; height: 20px; position: absolute; background: #fff; bottom: 0; left: 0; overflow: hidden; } .item:hover .image img { transform: scale(1.1) rotate(0.1deg); -ms-transform: scale(1.1) rotate(0.1deg); -webkit-transform: scale(1.1) rotate(0.1deg); border: none; outline: none; box-shadow: none; } 

 <div class="row"> <div class="large-up-2"> <div class="column"> <div class="item"> <div class="image"> <img src="http://www.planwallpaper.com/static/images/Beautiful_Wallpaper_1080p_Full_HD.jpg"/> <div class="border"></div> </div> <div class="content"> Content </div> </div> </div> </div> </div> 

Answer 1

通过在下面的元素上添加-1px的边距来解决底部问题，​​从而弥补了1px的空白。