Making HTML images, to glow in CSS as transitions

Question

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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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(){
  $(".landing-page-buttons a").on("click", function(e){
    e.preventDefault();
    $(".login-page").toggleClass("open");
  });
  
  $(".login-page .close").on("click", function(e) {
    e.preventDefault();
    $(".login-page").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 href="#">Login</a></li>
        <li><a href="#">Also Login</a></li>
      </ul> 
    </div>
  </div>
  
  <div class="login-page">
    <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>

Making HTML images, to glow in CSS as transitions

Sign up