CODEWITHSUNDEEP
htmlcss
StuBlackett
StuBlackett

Reputation: 3857

css3 transition effect on a block

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>

Upvotes: 2

Views: 173

Answers (5)

Ravikumar Kasirajan
Ravikumar Kasirajan

Reputation: 1

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}

}

Upvotes: 0

elreeda
elreeda

Reputation: 4597

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
}

Upvotes: 0

fnune
fnune

Reputation: 5494

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/

Upvotes: 2

Ram kumar
Ram kumar

Reputation: 3162

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/

Upvotes: 1

ketan
ketan

Reputation: 19341

Just give 

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

Working Fiddle

Upvotes: 1

Related Questions