gudh / ihover Goto Github PK
View Code? Open in Web Editor NEWiHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
Home Page: gudh.github.io/ihover/dist/index.html
iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
Home Page: gudh.github.io/ihover/dist/index.html
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.
Could you please add this feature?
Thanks
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>
How about npm install support?
html
<!doctype html>
<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>
<!-- 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 -->
<
Name | |
Phone | |
Message | <textarea name="msg" placeholder="Type your text here..."></textarea> |
css
body
{
margin:0px;
}
{
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;
}
{
width:100%;
height:70px;
position:fixed;
background-color:black;
right:0px;
z-index: 100;
}
{
top:0;
}
{
left:0;
right:0;
z-index: :100;
width:100%;
height:48px;
background-color:black;
color:white;
text-align: center;
}
{
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;
}
{
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;
}
{
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)
{
{
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;
}
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.
Any chance you'll publish this to bower? Looks great.
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.
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)."
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
This is possible to have a less version ?
Thanks
I wonder if you have a "solution" for using ihover on a touch screen.
Francois
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.
Hi !
Awesome Work !
I just would to know if I can use it in my theme destined to commercial use (themeforest) ?
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!
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.
Any ideas how I can stop the page scrolling back to the top when an item is clicked (on ipad/mobile devices)? Thanks!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.