Я создал на своем веб-сайте раздел с блоками, и я бы хотел, чтобы когда пользователь наводил курсор на блок, заголовок блока постепенно исчезал.

Пока эффекта нет, просто скачет.

См. Эту скрипку для текущего кода

Как мне это сделать?

Код:

.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>
2
StuBlackett 6 Янв 2016 в 13:38

5 ответов

Лучший ответ

Вот рабочая скрипка с тем, что (я думаю) вам нужно:

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 /

2
Fausto NA 6 Янв 2016 в 10:44

Пожалуйста, используйте transition: all linear .3s; на .blocks .block .block-caption. Я использую эффект затухания для этой подписи. Отметьте эту скрипку https://jsfiddle.net/utrgtech/3/

1
Kumar 6 Янв 2016 в 10:43

Просто дай

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

Рабочая скрипка

1
ketan 6 Янв 2016 в 10:42

Поставить анимацию: fadeIn .6s easy-in 1 вперед; в .blocks .block: hover .block-caption

.blocks .block: hover .block-caption {

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

}

@keyframes fadeIn {

  to {opacity: 1}

}

0
Ravikumar Kasirajan 6 Янв 2016 в 10:59

Вы должны рекламировать свой .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
}
0
elreeda 6 Янв 2016 в 10:46