Показывать эффект масштабирования при зависании внутри переполнения скрытого родителя

Question

Я использую слайдер содержимого (слайдер миниатюр) при наведении указателя на каждый элемент, я хочу его масштабировать (сделать его больше), а масштабирование предотвращается переполнением скрытого родителя, в основном его что-то вроде этого

.parent { 
    overflow hidden 
} 
.child:hover { 
    transform: scale(1.2); 
} 

Вот это codepen самого

http://codepen.io/nadeemkhedr/pen/OXkKxa?editors=1100

Answer 1

слайдера Если я понял правильно, вы хотите, чтобы ваш ребенок элемент, чтобы быть больше, чем родители после масштабирования. Если это так, вот JSfidlle с решением:

https://jsfiddle.net/7vd6fhfo/3/

И код:

HTML

<div class="parent"> 
    <div class="child"> 

    </div> 
</div> 

CSS

.parent{ 
    width:200px; 
    height:200px; 
    background-color:green; 
    overflow:hidden; 
} 
.child{ 
    width:190px; 
    height:190px; 
    background-color:red; 
    position:absolute; 
} 
.child:hover{ 
    transform: scale(1.2); 
} 

Answer 2

Перейди через ниже код.

.item { float:left; position: relative; border: 1px solid #333; 
 
    overflow: hidden; width: 350px;} 
 
.item img {width: 100%; display:table-cell; 
 
    -moz-transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.item:hover img { 
 
    -moz-transform: scale(1.4); 
 
    -webkit-transform: scale(1.4); 
 
    transform: scale(1.4); 
 
}

<div class="item"> 
 
    <img src="http://www.dike.lib.ia.us/images/sample-1.jpg/image" alt="image" width="100%" > 
 
</div>

Надеюсь, вам понравится.