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&txt=640%C3%97480&w=640&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>
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/
Just give
.block-caption {
transition:2s all;
-webkit-transition:2s all;
-ms-transition:2s all;
}
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/
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
}
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}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.