CODEWITHSUNDEEP
jqueryhtmlcsscss-transitions
user6636563
user6636563

Reputation:

Making HTML images, to glow in CSS as transitions

I've made a simple login system. But I don't know how to make it as transitions.

Demo: https://jsfiddle.net/xcefgg9g/

HTML

    <body>

   <!-- Header
   ================================================== -->
   <header id="home">
      <div class="row banner">
         <div class="banner-text">
         <div class="stop">
        <div class="logo"> <img src="http://i.imgur.com/R6bUhGI.png" width="500" height="500" ></img></div>
              <div class="text">Alege ce ești.</div>
<div class="jucator"><a href="https://google.com"> <img src="http://i.imgur.com/SMHDIim.png"> </a>
        <a href="https://google.com">  <img src="http://i.imgur.com/PAGOmxn.png"></a></div>


         </div>
      </div>



   </header> <!-- Header End -->

CSS

    body { background: #0f0f0f; }
header {
   position: relative;
   height: 800px;
   min-height: 500px;
   width: 100%;
   background: #161415 url(http://i.imgur.com/GOX7opa.gif)  top center;
   background-size: cover !important;
    -webkit-background-size: cover !important;
   text-align: center;
   overflow: hidden;
}

header:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
header .banner {
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
   width: 85%;
   padding-bottom: 30px;s
   text-align: center;
}

header .banner-text { width: 100%; }
header .banner-text h1 {
   font: 90px/1.1em 'opensans-bold', sans-serif;
   color: #fff;
   letter-spacing: -2px;
   margin: 0 auto 18px auto;
   text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}

.jucator
{
padding-top:0px;
padding-left:200px;
}

.logo
{padding-left:181px;
padding-bottom:25px;
}

.text{
    padding-bottom:50px;
    padding-left:200px;
    font-size: 200%;

}

Live: http://vestigedayz.com/nerve/

I want to make Jucator and Observator images as transitions (When cursor goes on Jucator, it will show a light under image, and when goes to Observator it will show another color)

And when I press on it, I want to bring login section as a transition (slowly)

How can I make this?

Thank you

Upvotes: 0

Views: 86

Answers (2)

zsawaf
zsawaf

Reputation: 2001

I did a basic layout for you.

For the buttons, I just added a box-shadow transition on hover.

For the login page I just made it transition from top when you click on any of the buttons (you can play around with it, or have your own transition).

Pretty straightforward, let me know if you have questions. 

$(document).ready(function(){
  // first login page
  $(".landing-page-buttons .first-login").on("click", function(e){
    e.preventDefault();
    $(".login-page.first").toggleClass("open");
  });
  
  $(".first .close").on("click", function(e) {
    e.preventDefault();
    $(".login-page.first").toggleClass("open");
  });
  
  // second login page
  $(".landing-page-buttons .second-login").on("click", function(e){
    e.preventDefault();
    $(".login-page.second").toggleClass("open");
  });
  
  $(".second .close").on("click", function(e) {
    e.preventDefault();
    $(".login-page.second").toggleClass("open");
  });
});
body {
  margin: 0;
  padding: 0;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;  
}

a {
  text-decoration: none;
  border: 1px solid #f9f9f9;
  color: white;
  padding: 5px 10px;
  transition: box-shadow 0.3s;
}

a:hover {
  box-shadow: 0 3px 10px white
}

.main-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.landing-page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #666;
  z-index: 0;
}

.landing-page-buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.landing-page-buttons ul li {
  float: left;
  margin-left: 10px;  
}

.landing-page-buttons ul li:first-child {
  margin-left: 0px;  
}

.login-page {
  position: absolute;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  transition: all 1s;
  z-index: 5;
}

.login-page.open {
  top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
  <div class="landing-page">
    <div class="landing-page-buttons">
      <ul>
        <li><a class="first-login" href="#">Login</a></li>
        <li><a class="second-login" href="#">Also Login</a></li>
      </ul> 
    </div>
  </div>
  
  <div class="login-page first">
    <h3>First Login Page</h3>
    <a href="#" class="close">close</a>
    <ul class="login-form">
      <li>Username: <input type="text"></li>  
      <li>Password: <input type="text"></li>
    </ul>
  </div>
  
  <div class="login-page second">
    <h3>Second Login Page</h3>
    <a href="#" class="close">close</a>
    <ul class="login-form">
      <li>Username: <input type="text"></li>  
      <li>Password: <input type="text"></li>
    </ul>
  </div>
</div>

Upvotes: 1

Brian Smith
Brian Smith

Reputation: 165

  body { background: #0f0f0f; }
header {
   position: relative;
   height: 800px;
   min-height: 500px;
   width: 100%;
   background: #161415 url(http://i.imgur.com/GOX7opa.gif)  top center;
   background-size: cover !important;
    -webkit-background-size: cover !important;
   text-align: center;
   overflow: hidden;
}

header:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
header .banner {
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
   width: 85%;
   padding-bottom: 30px;s
   text-align: center;
}

header .banner-text { width: 100%; }
header .banner-text h1 {
   font: 90px/1.1em 'opensans-bold', sans-serif;
   color: #fff;
   letter-spacing: -2px;
   margin: 0 auto 18px auto;
   text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}

.jucator
{
display: inline-block;
padding: 0px;
-webkit-transition: background 2s;
    transition: background 2s;
}

.jucator:hover{
  background: blue;
}

.observator{
  display:inline-block;
  padding: 0px;
  -webkit-transition: background 2s;
    transition: background 2s;
}

.observator:hover{
  background: green;
}

.logo
{padding-left:181px;
padding-bottom:25px;
}

.text{
    padding-bottom:50px;
    padding-left:200px;
    font-size: 200%;
    
}
</body>

</html>


<body>

   <!-- Header
   ================================================== -->
   <header id="home">
      <div class="row banner">
         <div class="banner-text">
         <div class="stop">
        <div class="logo"> <img src="http://i.imgur.com/R6bUhGI.png" width="500" height="500" ></img></div>
              <div class="text">Alege ce ești.</div>
          <center>
            <div class="jucator"><a href="https://google.com"> <img src="http://i.imgur.com/SMHDIim.png"> </a></div>
        <div class="observator">
        <a href="https://google.com">  <img src="http://i.imgur.com/PAGOmxn.png"></a>
        </div>
       
          </center>
          
     
        


         </div>
      </div>



   </header> <!-- Header End -->

You could try something like this using css transitions with :hover on each button. This would be move suitable if you don't want to use jquery.

Upvotes: 0

Related Questions