在div旋转时，图像或背景图像会逐渐消失吗？

时间：2015-02-19 13:18:09

标签： html css css3 css-animations

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

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

I have also included a livelink可以帮助您回答这个问题，但是当问题已经回复给帖子的未来后代时，这个问题就会被删除。

HTML

＆＃13;
＆＃13; 
  .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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：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

e.g。

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

答案 1 :(得分：1)

你可以使用伪元素，这将大大减少你的标记：

＆＃13;
＆＃13; 
.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);
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

注意

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

答案 2 :(得分：1)

您可以在父母悬停时将图片添加到display:none悬停。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题