图像上的表单过渡

Question

我基本上是在尝试重新创建网站 http://www.livewestvillage.com/一半的方向，可用性和居民登录部分。我还没有机会很好地学习 css，所以如果有人能给我看一个例子或一个网站，从中学习这种东西，我将不胜感激。

我刚刚在工作中被淹没了，所以我真的没有那么多时间做这样的个人项目了。

Answer 1

这是如何实现这些效果的示例。我已经评论了css，希望你能学到一些东西。

.HTML

<h1>
Hover Me!!
</h1>
<div class="box">
<div class="widget-image">
<img src="http://www.livewestvillage.com/media_library/2014/58c310ba3db6a855.jpg" class="img-responsive">
</div>
<div class="widget-form">
<form>
  <input type="text" name="firstname" placeholder="First Name">
  <input type="text" name="lastname" placeholder="Last Name">
</form>
</div>
</div>

.CSS

.box{
    overflow: hidden;
    position: relative;
}

input {
    display: inline-block;
    margin: 0px 6px;
    padding: 10px 10px 10px 15px;
}
.widget-form {
    padding: 43px 0px;
    width: 426px;
    height: 100%;
    background: rgba(0, 0, 0, 0.64);
    transition:all 0.5s ease-out;
    position: absolute;
    top: 250px;
    z-index: 100;
}
//set the position of the widget
.widget-image{
  width: 426px;
}
//when the mouse enter the div will scroll up
.widget-image:hover + .widget-form {
      top: 0;
} 
//maintain the div position
.widget-form:hover, .widget-form:focus ,  .widget-form :active {
  top: 0;
} 

演示

Answer 2

创建一个带有 id reg的表单标签

将表单标签绝对定位在带有类slider的div 中

将变换比例属性应用于0x0

将悬停属性应用于滑块容器以使窗体显示

点击这里查看笔

编辑：另一种方法

创建具有 ID reg的表单标记

将表单标签绝对定位在带有类slider的div 中

将元素置于顶部：100% 以将其向下推并隐藏

在滑块上应用伪:hover以显示表单

这是另一个示例，请单击此处获取笔