html

student

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

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; }

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.

opened by johnmarlow007 1
left to right square hover is not working
html
student

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

 <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> 

 <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> 

 <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> 

 <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> 

 <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> 

 <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> 

 <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> 

 <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> 

Address

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

[email protected]

Enquiry Form

<

Name

Email

Phone

Message

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; }
opened by gamersudhar 0
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.

opened by FranciscoKnebel 0
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

opened by atzezappa 2
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.

opened by jdrda 1