Doesn't support different image size ?
zhouhao27 opened this issue · comments
I have a layout before using ihover:
But when I use ihover it becomes:
My html:
<div class="carousel slide media-carousel-sm visible-sm media-sm" id="section-media-sm">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-6 withborder">
<div class="ih-item square colored effect13 bottom_to_top">
<a href="#">
<div class="img"><img src="http://placehold.it/331x260" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a>
</div>
<!--<a class="thumbnail" href="#">-->
<!--<img alt="" src="http://placehold.it/331x260">-->
<!--</a>-->
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="ih-item square colored effect13 bottom_to_top">
<a href="#">
<div class="img"><img src="http://placehold.it/220x124" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a>
</div>
<!--<a class="thumbnail" href="#">-->
<!--<img alt="" src="http://placehold.it/220x124">-->
<!--</a>-->
</div>
<div class="col-xs-6">
<div class="ih-item square colored effect13 bottom_to_top">
<a href="#">
<div class="img"><img src="http://placehold.it/220x124" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a>
</div>
<!-- -->
<!--<a class="thumbnail" href="#">-->
<!--<img alt="" src="http://placehold.it/220x124">-->
<!--</a>-->
</div>
<div class="col-xs-6">
<div class="ih-item square colored effect13 bottom_to_top">
<a href="#">
<div class="img"><img src="http://placehold.it/220x124" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a>
</div>
<!--<a class="thumbnail" href="#">-->
<!--<img alt="" src="http://placehold.it/220x124">-->
<!--</a>-->
</div>
<div class="col-xs-6">
<div class="ih-item square colored effect13 bottom_to_top">
<a href="#">
<div class="img"><img src="http://placehold.it/220x124" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a>
</div>
<!--<a class="thumbnail" href="#">-->
<!--<img alt="" src="http://placehold.it/220x124">-->
<!--</a>-->
</div>
</div>
</div>
</div>
</div>
The code inside is what I used before ihover. Here is the css:
$carousel-top: 50px;
$carousel-control-offset: -2px;
body
{
padding-top: $carousel-top;
background-color: #dfdfdf;
}
.media-up .thumbnail,
.media-sm .thumbnail,
.media-xs .thumbnail {
margin-bottom: 18px;
}
.media-carousel-xs,
.media-carousel-sm,
.media-carousel-up {
margin-bottom: 0px;
padding: 15px;
border: 0px solid #e5e5e5;
}
.thumbnail {
img {
width: 100%;
position: relative;
}
}
My question is if ihover support different size images? Thanks.