How to create this effect on Image with CSS

Question

I've been trying to design a login page for my website. I found one that I like a lot but I've been facing some problems when trying to implement it into mine.

This is what I'm trying to accomplish: Example

For example I'm using Bootstrap 3 for this:

#particles-js{
    background: #dd4814;
    height: 100vh;
}

#login{
    margin: auto;
    background-color: #FFFFFF;
    opacity: 0.9;
    padding: 2em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 10px;
}

.btn-orange{
    color: #FFFFFF;
    background-color: #dd4814;
    border-color: #dd4814;
}

.btn-orange:hover{
    color: #FFFFFF;
    background-color: #ce4211;
}

.login-title{
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    display: block;
    padding-bottom: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="particles-js">
    <div id="login">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <a href="#" target="_blank"><img vspace="50" class="img-responsive" src="https://codeigniter.com/assets/images/ci-logo-big.png"></a>
                </div>
                <div class="col-md-6">
                    <form>
                    <span class="login-title">Member Login</span>
                    <!-- Username -->
                    <div class="form-group has-feedback">
                    <label for="username">Username</label>
                    <input type="text" id="username" name="username" class="form-control" placeholder="Username" autocomplete="no" required>
                    <span class="form-control-feedback"><i class="fa fa-envelope"></i></span>
                    </div>
                    <!-- Password -->
                    <div class="form-group has-feedback">
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" class="form-control" placeholder="Password" autocomplete="no" required>
                        <span class="form-control-feedback"><i class="fa fa-lock"></i></span>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <button type="submit" class="btn btn-orange btn-block">Log In</button>
                        </div>
                    </div>
                    </form>
                    <a href="#">Forgot password</a> | <a href="#">Register</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

Not only that effect I'm having troubles with but with the background as well; the background goes all the way down when accessing via a computer or tablet but when accessing with a cell phone is not working as I want to.

I hope I could make myself clear.

NOTE: the background issue is not really a concern, I just pointed it out if somebody would like to help me out on that one but it is not necessary. What I really want help with, is with the image effect.

score 1 · Answer 1 · answered Mar 24 '18 at 08:40

https://codepen.io/ariona/pen/JopOOr see this example its posted on codepen you just need to search before post a question :)

css

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
body {
  background: #edf2f4;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  font-family: "Playfair Display",georgia,serif;
}

.card {
  pointer-events: none;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  padding: 30px;
  background: white;
  border-radius: 5px;
  width: 400px;
  height: 200px;
  margin: auto;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  position: relative;
}
.card:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 10px;
  border-radius: 50%;
  left: 0;
  bottom: -50px;
  -webkit-box-shadow: 0 30px 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 30px 20px rgba(0, 0, 0, 0.3);
}
.card .card-content {
  margin: auto;
  text-align: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.card h1 {
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
}
.card p {
  -webkit-transform: translateZ(50px);
          transform: translateZ(50px);
  display: block;
}
.card p.related {
  -webkit-transform: translateZ(80px);
          transform: translateZ(80px);
  font-style: italic;
}
.card a {
  color: #69c6b8;
  pointer-events: auto;
}

js jquery

var card = $(".card");

$(document).on("mousemove",function(e) {  
  var ax = -($(window).innerWidth()/2- e.pageX)/20;
  var ay = ($(window).innerHeight()/2- e.pageY)/10;
  card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");
});

html

<div class="card">
  <div class="card-content">
    <h1>Just hover around</h1>
    <p><small>by <a href="http://ariona.net" target="_blank">Ariona, Rian</a></small></p>
    <p class="related"><strong>See also: </strong><a href="https://codepen.io/ariona/details/LVZLGP/" target="_blank">Staged dropdown animation</a></p>

  </div>
</div>

I actually tried but I just did not know how to search for it, I mean I did not even know that effect was called 3D hover plane effect. Thanks. — Kirasiris, Mar 24 '18 at 08:59

score 0 · Accepted Answer · answered Mar 24 '18 at 07:56

Looks like in the example they're using a library called tilt.js, so you could just use that to achieve the effect you're looking for. If you were to code that by hand, I'd start by looking at the tilt.js source code here.

As for the background, I'm not sure what exactly the problem is, but since you are using height: 100vh and having problems on mobile, I assume the background is being to high? That'd be a known issue discussed in other questions, for example here.

How to create this effect on Image with CSS

2 Answers2