Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

left to right square hover is not working #19

Open
gamersudhar opened this issue Sep 19, 2016 · 0 comments
Open

left to right square hover is not working #19

gamersudhar opened this issue Sep 19, 2016 · 0 comments

Comments

@gamersudhar
Copy link

gamersudhar commented Sep 19, 2016 •
edited
Loading

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>
  • as
  • c
  • h
  • s
as1 c2 h3 p4 s5
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

Creativity

Positivity

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 fb tweet linkedin pinterest

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@gamersudhar