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

Question

我正在尝试创建旋转div，它们在不悬停时显示图像，然后在悬停时旋转并显示文本和背景色。我有旋转操作，背景颜色改变，当div旋转时出现文本。然而，当旋转发生时，我找不到将图像插入div并在悬停时使该图像淡出的方法。

我的代码在下面，有人能告诉我哪里出了问题吗？

我还附上了一个生动的链接来帮助你回答这个问题，但当这个问题得到回答后，这个链接将被删除，以供该帖子的后代使用。

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

当父对象悬停时，您只需将选择图像添加到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>

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>

注意

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

Answer 3

有了这个，每个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添加到.triggerdiv 中

例如

<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>