CSS3过渡效果

Question

I've built a block section on my website, what I'd like to do is when the user hovers over the block, the block-caption fades in over the top.

Currently there's no effect, it just jumps.

See this fiddle for current code

How do I do this?

Code:

 .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

Here's a working fiddle with what (I think it is) you want:

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

You can add:

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

For example. It enables compatibility throughout all browsers. Here's documentation: https://css-tricks.com/almanac/properties/t/transition/

Answer 2

Just give

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

Working Fiddle

Answer 3

Please use transition: all linear .3s; on .blocks .block .block-caption I have use fade effect for this caption. Check this fiddle https://jsfiddle.net/utrgtech/3/

Answer 4

you to ad to your .block this

.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

put animation: fadeIn .6s ease-in 1 forwards; 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}

}