1

hover эффект

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

3
  • думаю, jquery animation подойдет. хотя вопрос не совсем понятен
    – Bipa
    19 ноя 2017 в 10:36
  • Есть img, надо что бы при наведении появлялся вот этот синий блок с кнопками, надо что бы плавно появлялся.
    – uzi_no_uzi
    19 ноя 2017 в 10:40
  • Есть такие полезные штуки: api.jquery.com и w3schools.com/css/css3_transitions.asp
    – Bipa
    19 ноя 2017 в 10:45

1 ответ 1

4

* {
  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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.