Question

我基本上是尝试在本网站http://www.livewestvillage.com/的一半左右重新创建路线，可用性和居民登录部分。我还没有机会学习css，所以如果有人可以向我展示一个例子或一个很好的学习这类东西的网站，我会很感激。

我刚刚在工作中被淹没，所以我不再为这样的个人项目获得更多的时间。

Answer 1

创建一个标识为reg的表单标记

使用类slider将表单标记完全定位在div中

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

将悬停属性应用于滑块容器，以使表单显示为

click here for pen

编辑：另一种方法

创建标识为reg的表单标记

使用类slider将表单标记完全定位在div中

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

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

这是另一个例子click here for pen

Answer 2

这是如何实现这些效果的例子。我已经对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;
}

DEMO

表格转换图像

2 个答案: