gudh/ihover

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

ihover's Issues

Doesn't support different image size ?

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.

Does NOT work with Bootstrap 3

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Your effects are not responsive or mobile first.

If this effect did "Work well with Bootstrap 3 (Bootstrap is not necessary though)." as stated on your demo page. Then the images would not overlap, they would scale down.

Please fix or remove "Work well with Bootstrap 3 (Bootstrap is not necessary though)."

Custom circle size

Hi there,

How can I adjust the radius for the circle widgets? Adjusting the css seems to only affect the content but not the outer rim.

Thanks!

Touch screen

I wonder if you have a "solution" for using ihover on a touch screen.
Francois

LESS version

This is possible to have a less version ?

Thanks

Solution to image responsive size problems

As I had problems with image size I used this code in css:

.ih-item.square {
width: auto !important;
height: auto !important;
}

Which can be applied to all types also, for me it is better to set the image size. Width and height of the container should be defined by developer, not in the library.

Commercial use

Hi !
Awesome Work !
I just would to know if I can use it in my theme destined to commercial use (themeforest) ?

Browser compatibility table

Could you please add this feature?
Thanks

ihover in Jimdo?

Hi there,

I tried to implement the ihover code in a Jimdo web-page and it doesn´t work. Iwould be very thankful fo any advice why it doesn´t... here ist the address of the page:

http://ihovertest.jimdo.com/ihovertest/

So glad I found you,
Regards from Berlin, az

Page jumps to top when hover clicked

Any ideas how I can stop the page scrolling back to the top when an item is clicked (on ipad/mobile devices)? Thanks!

left to right square hover is not working

html
<!doctype html>

<title>student</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="engine1/jquery.js"></script> <script type="text/javascript" src="engine1/wowslider.js"></script> <script type="text/javascript" src="engine1/script.js"></script>

• Home
• About us
• Services
• Products
• Contact us

• 
• 
• 
• 

1 2 3 4 5

http://wowslider.com/ by WOWSlider.com v8.7

<div class="hovereffect">
    <img class="img-responsive" src="../sudhar/photo/i.jpg" alt="innovation" height="289px" width="289px"/>
    <div class="overlay">
        <h2>Innovation</h2>
    </div>
</div>

Creativity

Positivity

<!-- normal -->
<div class="ih-item square effect15 left_to_right"><a href="#">
    <div class="img"><img src="../sudhar/photo/taj.jpg" alt="img"></div>
    <div class="info">
      <h3>Heading here</h3>
      <p>Description goes here</p>
    </div></a></div>
<!-- end normal -->

<!-- colored -->
<div class="ih-item square colored effect15 left_to_right"><a href="#">
    <div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
    <div class="info">
      <h3>Heading here</h3>
      <p>Description goes here</p>
    </div></a></div>
<!-- end colored -->

<!-- normal -->
<div class="ih-item square effect15 right_to_left"><a href="#">
    <div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
    <div class="info">
      <h3>Heading here</h3>
      <p>Description goes here</p>
    </div></a></div>
<!-- end normal -->

<!-- colored -->
<div class="ih-item square colored effect15 right_to_left"><a href="#">
    <div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
    <div class="info">
      <h3>Heading here</h3>
      <p>Description goes here</p>
    </div></a></div>
<!-- end colored -->

<!-- normal -->
<div class="ih-item square effect15 top_to_bottom"><a href="#">
    <div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
    <div class="info">
      <h3>Heading here</h3>
      <p>Description goes here</p>
    </div></a></div>
<!-- end normal -->

<!-- colored -->
<div class="ih-item square colored effect15 top_to_bottom"><a href="#">
    <div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
    <div class="info">
      <h3>Heading here</h3>
      <p>Description goes here</p>
    </div></a></div>
<!-- end colored -->

<!-- normal -->
<div class="ih-item square effect15 bottom_to_top"><a href="#">
    <div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
    <div class="info">
      <h3>Heading here</h3>
      <p>Description goes here</p>
    </div></a></div>
<!-- end normal -->

<!-- colored -->
<div class="ih-item square colored effect15 bottom_to_top"><a href="#">
    <div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
    <div class="info">
      <h3>Heading here</h3>
      <p>Description goes here</p>
    </div></a></div>
<!-- end colored -->

Address

Abc private limited no54,2ndstreet, madipakkam, chennai-67.

[email protected]

Enquiry Form

<

Name
Email
Phone
Message	<textarea name="msg" placeholder="Type your text here..."></textarea>

Copyrights © to WWW.abcpvt.com

css
body
{
margin:0px;
}

wrapper

{
width:100%;
height:auto;
margin:0px;
background-color:#E9E581;
}
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width:50%;
height: 1px;
content: '\a0';
background-color:black;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}

header

{
width:100%;
height:70px;
position:fixed;
background-color:black;
right:0px;
z-index: 100;
}

header

{
top:0;
}

footer

{
left:0;
right:0;
z-index: :100;
width:100%;
height:48px;
background-color:black;
color:white;
text-align: center;
}

footer img

{
float:right;
margin:5px;
padding:5px;
}

.company
{
width:50%;
height:60px;
color:white;
float:left;
text-align:center;
padding:15px;
}
.navbar
{
height:60px;
width:50%
background-color:black;
color:white;
float:left;
overflow:hidden;

}

ul li
{
display: block;
position: relative;
padding:10px 15px;
float:left;
}
ul li a
{
color:white;
}
.navbar a:hover
{
border-bottom:3px solid red;
padding:18px;

}

myCarousel

{
background-color:white;
height:370px;
width:100%;
float:left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img
{
width: 70%;
height:15%;
margin: auto;
background-color:white;
}

.thumbnail
{
height:300px;
width:300px;
padding:25px auto;
margin:5px;

}

con

{
width:100%;
height:300px;
}
.contact
{
width:60%;
height:300px;
background-color:grey;
padding:100px;
float:left;
}

.enquiry
{
width:40%;
height:300px;
background-color:seagreen;
float:left;

}
input[type=text]:focus {
border:3px solid grey;
}
input[type="text"]
{
margin: 0 0 15px 0;
}

@media screen and (max-width:959px)
{

wrapper

{
width:auto;
}
.navbar
{
width:auto;
}
img
{
width:auto;
}

}
@media screen and (max-width:640px)
{
#wrapper,#con,#enquiry
{
width:auto;
}
}

.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}

.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(460px, -100px) rotate(180deg);
-ms-transform: translate(460px, -100px) rotate(180deg);
transform: translate(460px, -100px) rotate(180deg);
-webkit-transition: all 0.2s 0.4s ease-in-out;
transition: all 0.2s 0.4s ease-in-out;
}

.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}

.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}

.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}

.hovereffect:hover h2 {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}

.hovereffect:hover a.info {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}

Plugin Wordpress

npm support

How about npm install support?

Better naming

I believe it'd be easier to browse through effects if a better naming strategy is used instead of Hover effect 1, Hover effect 2, etc..

Thanks.

Text first

Hello.
First of all, this is a GREAT project! Congratulations!
Secondly, this is not an issue, but an idea.
I would need (and I think many others too) the text to be first and then animation to turn the circle/square into the image.
Is there an option for that or can this be a development idea?
Thank you so much.
Andy.

Fixed px sizes

image and effects (masks, info) classes all have fixed px sizes. Better solution is to have auto values, or percentage. Fixed sizes cause hidden overflow.

Responsive

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

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> 

hyperlinks inside .info div?

In the codrops article hyperlinks are used inside paragraphs (and inside the div with .ch-info). Is it possible to do this with ihover? Simply inserting a hyperlink inside the div + paragraph with ihover isn't possible because that would put a hyperlink within a hyperlink. Tried re-locating the existing hyperlink (that contains the image and the div with .info) into the div with .info but that seriously messes up the effect.

Publish to bower?

Any chance you'll publish this to bower? Looks great.