悬停的问题显示不同的内容

Question

我正在尝试复制一个页面。我所指的网站website。

如果您在主页上向下滚动一半，您将看到绿色方块。我想做那样的事情。当您将鼠标悬停在绿色框上时，您将看到它们变为紫色，悬停效果似乎从中间淡入，一般主题发生变化。我在努力达到同样的效果时遇到了困难。

我遇到了这些问题。

1. 我不确定如何从中间效果中获得淡入效果。
2. 我无法在悬停时改变我的描述。
3. 我的块之间似乎有填充/边距问题，但由于我将边距/填充设置为0，因此我不确定它的来源。

我很感激帮助。

.box-container {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
}
.blue-box, .red-box {
  height: 300px;
  width: 25%;
  display: inline-block;
  padding: 0;
  margin: 0;
}
.blue-box:hover, .red-box:hover {
  background-color: purple;
  cursor: pointer;
}
.blue-box {
  background-color: blue;
}
.red-box {
  background-color: red;
}
.insideBoxWrap {
 padding: 50px 25px;
}
.box-title {
  color: #FFF;
  font-size: 2.2em;
}
.box-description {
  padding-top: 10px;
  color: green;
  font-size: 1.5em;
}
.box-description:hover {
  display: none;
}
.box-description-hover {
  display: none;
}
.box-description-hover:hover {
  display: block;
  color: #000;
  font-size: 1.1em;
}

<div class="box-container">
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
</div>

Answer 1

  

我不确定如何从中间效果中获得淡入效果。

不确定您想要什么，但以下是transitions的简单方法：

transition: all .5s ease-in-out;

  

我无法在悬停时改变我的描述。

.parent:hover .child {...}

  

我的块之间似乎有填充/边距问题，但我不确定   因为我将margin / padding设置为0，所以它来自哪里。

它的浏览器为内联*元素渲染空格，更多here。

快速修复 - .parent {font-size:0;} .child {font-size:16px;}

.box-container {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
}
.blue-box, .red-box {
  font-size: 16px;
  height: 300px;
  width: 25%;
  display: inline-block;
  padding: 0;
  margin: 0;
  vertical-align: top;
  transition: all .5s ease-in-out;
}
.blue-box:hover, .red-box:hover {
  background-color: purple;
  cursor: pointer;
}
.blue-box {
  background-color: blue;
}
.red-box {
  background-color: red;
}
.insideBoxWrap {
 padding: 50px 25px;
}
.box-title {
  color: #FFF;
  font-size: 2.2em;
}
.box-description, .box-description-hover {
  padding-top: 10px;
  color: green;
  font-size: 1.5em;
}
.box-description-hover {
  display: none;
}
.insideBoxWrap:hover .box-description-hover {
  display: block;
}
.insideBoxWrap:hover .box-description {
  display: none;
}

<div class="box-container">
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
</div>

Answer 2

这是您正在寻找的。请注意，一旦你开始在一个小组中使用它，由于定位，你可能会遇到麻烦。我查看了该网站，它看起来像一个Wordpress插件。如果是这种情况，你可以指望用这样的东西构建一个更大的CSS和一些JQuery来备份一些前端定位错误，最重要的是高度。您可以看到他们的一些脚本here

但是这应该让你开始有所作为。

这是HTML

<div class="item">
    <div class="item-main">
        <span class="ico ico3"></span>
        <h1>TEXT</h1>
    </div>
    <div class="item-hover">
        <h2>MY HOVER TEXT</h2>
        <p>Look what I can do.</p>
    </div>
</div>

和CSS

.item {
    background-color: #77cd8a;
    cursor: pointer;
    padding:20px 20px 60px;
    width:25%;
    height:50%;
    position:absolute;
    top:0;
}

.item:hover{
    height:50%;
}
.item-hover{
    opacity:0;  
    transform: scale(.7);
}
.item:hover .item-hover{
    opacity:1;  
    width:94%;
    height:130%;
    position:relative;
    top:-138px;
    right:-9px;
    padding:20px 20px 60px;
    background-color: #945692;
    box-sizing: border-box;
    transform: scale(1.2);
    transition: opacity .5s ease-out, transform .5s ease-out;
}

h1, h2{
    text-align:center;
    font-size:30px;
    margin-top:70px;
}

以下是DEMO

Answer 3

仔细检查http://isadoradesign.com/处的代码。

我注意到淡出的盒子元素实际上并没有淡出。里面藏着一个重复的紫色盒子。每个紫色框改变了它的opacity并使用transform:scale来做它的魔法。然而，我决定从头开始重新创造效果。

1. 对于每个盒子，我放置了一个内部带有紫色的隐藏克隆盒子
2. 悬停在父级上方。居中的克隆框将淡入并展开

以下是网站上方框的标本。当我放慢过渡并检查元素代码时，我找到了一种方法



以下片段

.box-container {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
}
.blue-box, .red-box {
  display:inline-table;
  height: 150px;
  width: 25%;
  padding: 0;
  margin: 0;
}
.blue-box {
  background-color: blue;
}
.red-box {
  background-color: red;
}

.insideBoxWrap:hover .box-description-hover{
   display:table-cell;
  position:absolute;
   width:100%;
  height:100%;
  opacity:1;
  left:0px;
  top:0px;
  background:purple;
  vertical-align:middle;
}


.insideBoxWrap {
  display:table-cell;
 position:relative;
 width:100%;
 height:100%;
 text-align:center;
 
}
.box-title {
  color: #FFF;
  font-size: 2.2em;
}


.box-description-hover {
  display:block;
  position:absolute;
  width:50%;
  height:60%;
  top:20%;
  left:25%;
  opacity:0;
  vertical-align:middle;
transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
}
.box-description-hover:nth-child(1){
  position:table-cell;
  vertical-align:middle;
}

<div class="box-container">
  <div class="blue-box">
    <div class="insideBoxWrap">
    <div class="box-description-hover">
       <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
    </div>
      <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
      
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
    <div class="box-description-hover">
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
    </div>
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
    </div>
  </div><div class="blue-box">

    <div class="insideBoxWrap">
      <div class="box-description-hover">
        <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
      </div>
      <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
    <div class="box-description-hover">
     <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
    </div>
      <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
      
    </div>
  </div>
</div>