ihover
ihover copied to clipboard
gudh
left to right square hover is not working
html
1
2
3
4
5<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 -->
Enquiry Form
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; }
