使图像或背景图像在 div 旋转时逐渐消失？

Question

我正在尝试创建旋转的 divs，它在未悬停时显示图像，然后在悬停时旋转并显示文本和背景颜色。当 div 旋转时，我有旋转动作，背景颜色发生变化，文本出现。但是，我找不到将图像插入 div 并在旋转发生时使该图像在悬停时消失的方法。

我的代码如下，有人可以告诉我哪里出错了吗？

I have also included a livelink 来帮助您回答问题，但是当问题得到回答后，这将被删除，以便将来 postpost 的真实性。

HTML

  .trigger {
    width: 200px;
    height: 200px;
  }
  .trigger.large {
    width: 400px;
  }
  .trigger.vertical {
    height: 400px;
  }
  .trigger.vertical * {
    height: 400px;
  }
  .hover-img,
  .hover-img.hover_effect {
    position: relative;
    width: 200px;
    height: 200px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform-style: preserve-3d;
    text-align: center;
    font-size: 0;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    border-style: solid;
    border-width: 1px;
    border-color: #CCCCB2;
    border-radius: 5px;
  }
  .trigger.large .hover-img,
  .trigger.large .hover-img.hover_effect {
    width: 400px;
  }
  .trigger:hover > .hover-img {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    font-size: 14px;
    color: #FFF;
    background-color: #999;
  }
  #container {
    width: 960px;
    margin: 0 auto;
  }
  .row {
    display: flex;
  }
  .col {
    display: inline-block;
  }
  .trigger.large .hover-img,
  .trigger.large .hover-img.hover_effect {
    width: 400px;
  }

<div id="container">
  <div class="row">
    <div class="col">
      <div class="trigger vertical">
        <div tabindex="0" class="maincontent hover-img">Text Here</div>
      </div>
    </div>
    <div class="col">
      <div class="trigger">
        <div tabindex="0" class="maincontent hover-img">Text Here
        </div>
      </div>
      <div class="trigger">
        <div tabindex="0" class="maincontent hover-img">Text Here</div>
      </div>
    </div>
    <!-- </div>
     <div  class="row">-->
    <div class="col">
      <div class="trigger">
        <div tabindex="0" class="maincontent hover-img">Text Here</div>
      </div>
      <div class="trigger">
        <div tabindex="0" class="maincontent hover-img">Text Here</div>
      </div>
    </div>
    <div class="col">
      <div class="trigger">
        <div tabindex="0" class="maincontent hover-img">Text Here</div>
      </div>
      <div class="trigger">
        <div tabindex="0" class="maincontent hover-img">Text Here</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img">Text Here</div>
    </div>
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img">Text Here</div>
    </div>
    <div class="trigger large">
      <div tabindex="0" class="maincontent hover-img">Text Here</div>
    </div>
  </div>
  <div class="row">
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img">Text Here</div>
    </div>
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img">Text Here</div>
    </div>
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img">Text Here</div>
    </div>
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img">Text Here</div>
    </div>
  </div>

Answer 1

有了这个，你可以为每个人制作不同的图像 div

怎么样...
(JSFiddle)

$(document).ready(function() {
    $(".trigger").hover(function() {          /*On hover of one of the divs*/
            $(this).find( 'img' ).fadeOut();  /*Fade out the img inside it
            $(this).find( 'p' ).fadeIn();     /*And fade in the 'p'*/

    });
        $(".trigger").mouseleave(function() {
            $(this).find( 'img' ).fadeIn();
             //$(this).text("");

    });
});

然后他们将 img 和 p 添加到 .trigger div

例如

<div tabindex="0" class="maincontent hover-img">
<img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png" width="130px">
<p>Text here</p>

Answer 2

你可以为此使用一个伪元素，这会大大减少你的标记：

.hovereffect{
  height:200px;
  width:300px;
  background:lightgray;
  position:relative;
  display:inline-block;
  }
.hovereffect:before{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
  transition:all 0.8s;
  opacity:1;
  }

.hovereffect:hover:before{
  opacity:0;
  }

#thisone:before{
    background:url(http://placekitten.com/g/300/200);
  }
#thistwo:before{
    background:url(http://placekitten.com/g/300/300);
  }

<div class="hovereffect" id="thisone">I'm a load of text you wanted to see</div>
<div class="hovereffect" id="thistwo">I'm also a load of text you see?</div>

备注

通过以这种方式使用 class，如果您愿意，您可以很快地包含 不同图像 的功能。我已经为您的不同元素提供了一个 ID，因此您可以相应地更改 div 的 :before 元素的背景。

Answer 3

您可以只将 select 图像添加到 display:none 当父项悬停时悬停。

.trigger {
  width: 200px;
  height: 200px;
}
.trigger.large {
  width: 400px;
}
.trigger.vertical {
  height: 400px;
}
.trigger.vertical * {
  height: 400px;
}
.hover-img,
.hover-img.hover_effect {
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
  text-align: center;
  font-size: 0;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  border-style: solid;
  border-width: 1px;
  border-color: #CCCCB2;
  border-radius: 5px;
}
.trigger.large .hover-img,
.trigger.large .hover-img.hover_effect {
  width: 400px;
}
.trigger:hover > .hover-img {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  font-size: 14px;
  color: #FFF;
  background-color: #999;
}
#container {
  width: 960px;
  margin: 0 auto;
}
.row {
  display: flex;
}
.col {
  display: inline-block;
}
.trigger.large .hover-img,
.trigger.large .hover-img.hover_effect {
  width: 400px;
}
.hover-img img {
  max-width: 100%;
  height: auto;
}
.trigger:hover .hover-img img {
  display: none;
}

<div id="container">
  <div class="row">
    <div class="col">
      <div class="trigger vertical">
        <div tabindex="0" class="maincontent hover-img">
          <img src="http://lorempixel.com/output/abstract-q-c-100-100-2.jpg" alt="" />Text Here</div>
      </div>
    </div>
  </div>
</div>

<div id="container">
  <div class="row">
    <div class="col">
      <div class="trigger vertical">
        <div tabindex="0" class="maincontent hover-img">
          <img src="http://lorempixel.com/output/abstract-q-c-100-100-3.jpg" alt="" />Text Here</div>
      </div>
    </div>
  </div>
</div>

使图像或背景图像在 div 旋转时逐渐消失？

Making an image or background image fade away on div spin?

html

css

css-animations

有了这个，你可以为每个人制作不同的图像 div