Skip to content

Doesn't support different image size ? #14

@zhouhao27

Description

@zhouhao27

I have a layout before using ihover:

screen shot 2015-10-08 at 6 27 28 pm

But when I use ihover it becomes:

screen shot 2015-10-08 at 6 26 39 pm

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions