Как сделать такой hover эффект?

347
20 ноября 2017, 18:36

Как сделать такой ховер эффект, что бы он плавно появлялся?

Answer 1

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.b-container { 
  max-width: 400px; 
  margin: 0 auto 15px auto; 
  font-family: sans-serif; 
} 
 
.b { 
  padding-bottom: 56.25%; 
  position: relative; 
  height: 0; 
  overflow: hidden; 
  background: #ccc url(http://via.placeholder.com/150x250) no-repeat center center; 
  background-size: cover; 
} 
 
.b-show { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-wrap: wrap; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0, 0, 255, .5); 
  opacity: 0; 
  transition: .3s; 
} 
 
.b:hover .b-show { 
  opacity: 1; 
} 
 
.b-show-content { 
  padding: 10px; 
  color: #fff; 
} 
 
.b-show-content-title { 
  text-transform: uppercase; 
  text-align: center; 
} 
 
.btn { 
  display: inline-block; 
  border: 2px solid #fff; 
  color: #fff; 
  padding: 10px 15px; 
  min-width: 200px; 
  text-align: center; 
  border-radius: 7px; 
} 
 
.btn:hover { 
  background: #fff; 
  color: #00f; 
}
<div class="b-container"> 
  <div class="b"> 
    <div class="b-show"> 
      <div class="b-show-content"> 
        <h2 class="b-show-content-title">Title</h2> 
        <a class="btn">Btn</a> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
Правильная проверка хеша

Правильная проверка хеша

Как сделать проверку хеша?

245
Что это за запрос к bd?

Что это за запрос к bd?

Что это за запрос и в чем отличие от SELECT * FROM users ? Мне нужна наводка на то что гуглить

244
Поиск в таблице MySQL

Поиск в таблице MySQL

Привет всем! Есть таблица разделов кондиционеров, в ней есть раздел "Мульти-сплит-системы", ко мне приходит файл импорта и в нем часто встречаются...

240