search

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

left to right square hover is not working #19

Open gamersudhar opened 8 years ago

gamersudhar commented 8 years ago

html <!doctype html>

student
  • as
  • c
  • h
  • s
as1 c2 h3 p4 s5
http://wowslider.com/ by WOWSlider.com v8.7
innovation

Innovation

creativity

Creativity

Positivity

Positivity

img

Heading here

Description goes here

img

Heading here

Description goes here

img

Heading here

Description goes here

img

Heading here

Description goes here

img

Heading here

Description goes here

img

Heading here

Description goes here

img

Heading here

Description goes here

img

Heading here

Description goes here

Address

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

ABCPVT@gmail.com

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