Question

我在我的网站上构建了一个块部分，我想要做的是当用户将鼠标悬停在块上时，块标题会在顶部逐渐消失。

目前没有效果，它只是跳跃。

我该怎么做？

代码：

.blocks {
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}
.blocks [class*=col] {
  padding: 1px;
}
.blocks .block {
  background: #979797;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  height: 350px;
}
.blocks .block h3 {
  color: #ffffff;
  font-size: 2.5em;
  text-align: center;
  margin-top: 8px;
}
.blocks .block .block-title {
  position: absolute;
  text-align: center;
  top: 40%;
  width: 100%;
  display: block;
}
.blocks .block img {
  opacity: .4;
  display: block;
  height: 350px;
  margin: 0 auto;
  width: 100%;
}
.blocks .block .block-caption {
  background: #394074;
  top: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
  display: block;
  left: 0;
  opacity: 0;
  padding: 20px 0;
  position: absolute;
  text-align: center;
}
.blocks .block .block-caption a {
  display: inline-block;
  border: 2px solid #ffffff;
  padding: 20px 30px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffffff;
  font-size: 1.2em;
  margin-top: 1em;
}
.blocks .block .block-caption a:hover {
  text-decoration: none;
}
.blocks .block .block-caption p {
  margin-top: 1em;
  margin-bottom: 1em;
  display: block;
  font-size: 1.4em;
  color: #ffffff;
}
.blocks .block:hover .block-caption {
  opacity: 1;
}
.blocks .block:hover img {
  opacity: 0.2;
}

<div class="blocks">
  <div class="block">
    <div class="block-title">
      <h3>Online GP <br> Service</h3>
    </div>
    <!-- /.block-title -->
    <img alt="Training" src="https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=640%C3%97480&amp;w=640&amp;h=480">
    <div class="block-caption">
      <h3>Online GP <br> Service</h3>
      <p>Sed ut perspiciatis unde omnis iste natus
        <br>voluptatem accusantium doloremque</p>
      <a href="#">Find Out More</a>
    </div>
    <!-- /.block-caption -->
  </div>
</div>

Answer 1

这是一个工作小提琴，你想要的是什么（我认为是）：

https://jsfiddle.net/utrgtech/2/

您可以添加：

  -webkit-transition: opacity ease-out 1s;
  -moz-transition: opacity ease-out 1s;
  -o-transition: opacity ease-out 1s;
  transition: opacity ease-out 1s;

例如。它支持所有浏览器的兼容性。这是文档：https://css-tricks.com/almanac/properties/t/transition/

Answer 2

请提供

 .block-caption {
   transition:2s all;
   -webkit-transition:2s all;
  -ms-transition:2s all;
}

<强> Working Fiddle

Answer 3

请在transition: all linear .3s;上使用.blocks .block .block-caption我对此标题使用了淡入淡出效果。检查这个小提琴https://jsfiddle.net/utrgtech/3/

Answer 4

你要广告你的.block这个

.blocks .block .block-caption{
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; // mozilla brower
    -o-transition: all 1s ease-in-out; // opera brower
}

Answer 5

放动画：fadeIn .6s轻松进入1前锋; in .blocks .block：hover .block-caption

.blocks .block：hover .block-caption {

  opacity: 0;
  animation: fadeIn .6s ease-in 1 forwards;

}

@keyframes fadeIn {

  to {opacity: 1}

}

块上的css3过渡效果

5 个答案: