gudh / ihover

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
gudh.github.io/ihover/dist/index.html
3.48k stars 1.19k forks source link

Responsive #8

Open Kamel38 opened 10 years ago

Kamel38 commented 10 years ago

I use ihover and I realized that it's not responsive. Ones overlap each other : capture

I think I have to do something somewhere here :

.ih-item.square { position: relative; width: 316px; height: 216px; border: 8px solid #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }

Could anybody help me ?

My code with old Bootstrap :

<div class="row-fluid">
    <div class="span3">
         <div class="ih-item square effect8 scale_up"> .... etc
   </div>
</div> 
KingYes commented 10 years ago

+1 for responsive

arielk commented 10 years ago

I also used with Bootstrap 3 and i think it's must to be responsive Design :+1:

gudh commented 10 years ago

I'll take a look at it if I have time

Thanks for the advice :)

Kamel38 commented 10 years ago

I look forward to your response

navidkashani commented 9 years ago

+1

mastercho commented 9 years ago

Soon will we get a responsive style ?

jaycbrf4 commented 9 years ago

I am using this in a project and need this issue resolved. You said 8 months ago you would take a look-

spajz commented 9 years ago

+1 For BS responsive you can try to remove fixed dimensions. I have not tried all the effects, but this worked for me:

.ih-item.square {
  position: relative;
  /*width: 316px;*/
  /*height: 216px;*/
  /*border: 8px solid #fff;*/
  /*box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);*/
}

And html something like this:

<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
    <!-- normal -->
    <div class="ih-item square effect14 left_to_right">
        <a href="#">
            <div class="img">
                <img src="image.jpg" alt="img" class="img-responsive img-thumbnail">
            </div>
            <div class="info">
                <h3>Title</h3>
                <p>Description goes here</p>
            </div>
        </a>
    </div>
    <!-- end normal -->
</div>
Qocotzxin commented 7 years ago

That worked great! You might also change the code in the ihover.css file itself as this if you are working with Bootstrap 4v:

.ih-item.square { position: relative; width: 100%; height: auto; border: 8px solid #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }