Доброго времени суток. Изначально блок выглядит вот так. Все работает отлично
При переключении на разрешение планшета происходит вот это:
Использую Less и SmartGrid
На меньших разрешениях все нормально.
<div class="item">
<div class="cube">
<a href="#"><img src="/assets/img/first.jpg" alt="">
<i class="icon-mobile"></i></a>
<div class="textBox">
<h3>Адаптивная верстка</h3>
<p>Ваш сайт будет отлично выглядить с планшетов и мобильных устройств.</p>
</div>
</div>
</div>
.item {
text-align: center;
justify-content: space-between;
.md-block({
.size(12);
});
}
.cube {
position: relative;
overflow: hidden;
margin-bottom: 20px;
a {
display: block;
}
a i {
position: absolute;
font-size: 40px;
color: #15A4FA;
right: 0;
left: 0;
top: 0;
bottom: 0;
width: 80px;
height: 80px;
margin: auto;
text-align: center;
line-height: 80px;
transform: scale(3);
transition: 0.5s;
background: rgba(21,164,250, 0.3);
box-shadow: 8px rgba(180,180,180, 0.3);
border-radius: 100%;
opacity: 0;
}
a img {
width: 100%;
height: 100%;
transition: 0.5s;
max-width: 320px;
overflow: hidden;
}
a:hover img{
transform: scale(1.2);
}
}
.cube:hover a i {
opacity: 1;
transform: scale(1);
z-index: 2;
}
.cube .textBox {
position: absolute;
bottom: 5%;
color: #fff;
background: rgba(0,0,0, 0.3);
max-width: 100%;
text-transform: uppercase;
transition: 0.5s;
font-family: 'Roboto Slab', serif;
}
.cube:hover .textBox {
transform: translateY(150%);
}
h3 {
border-top: 1px solid;
border-bottom: 1px solid;
font-size: 20px;
font-weight: bold;
margin: 6px 0;
}
p {
text-transform: none;
font-size: 13px;
letter-spacing: 2px;
margin-bottom: 3px;
color: #fff;
box-shadow: 2px black;
}
