Наложение поверх изображения

Question

Я просто пытаюсь добавить кнопку при наведении, но я застрял ... Возможно ли добиться этого только с CSS ?? Я использую bootstrap, если это поможет

.card-img-top {
    -webkit-filter: brightness(100%);
}
.card-img-top:hover {
    -webkit-filter: brightness(40%);
    -webkit-transition: all .15s ease-in-out
    -moz-transition: all .15s ease-in-out
    -o-transition: all .15s ease-in-out
    -ms-transition: all .15s ease-in-out
    transition: all .15s ease-in-out
}

<img class="card-img-top" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">

Answer 1

Да, это возможно только с CSS. Вы можете сделать это с отдельным элементом со всем содержимым (.overlay). Этот элемент отображается при наведении курсора на обертку изображения. Я использовал opacity и visibility вместе, так что переход возможен (видимость, потому что opacity: 0 по-прежнему кликабелен).

Затемнение изображения можно сделать с помощью полупрозрачного цвета фона (rgba()). Затем я поместил обертку двух элементов кнопки внутри изображения с абсолютной позицией 50%, а затем переместил ее обратно на половину высоты и ширины, чтобы она отображалась точно в середине изображения. Конечно, это также можно сделать с помощью flexbox.

Две желтые кнопки внутри кнопки-оболочки расположены рядом друг с другом с помощью display: inline-block. Если вы делаете это так, часто добавляется разрыв строки, но его можно удалить с помощью white-space: nowrap.

.wrapper {
  display: inline-block;
  position: relative;
}
.wrapper:hover .overlay {
  opacity: 1;
  visibility: visible;
}
.overlay {
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease all;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
}
.overlay .button-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.overlay .button {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: yellow;
  margin: 20px;
  border-radius: 100px;
}
.image {
  max-width: 350px;
  max-height: 350px;
}

<div class="wrapper">
  <img class="image" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
  <div class="overlay">
  <div class="button-wrapper">
    <div class="button"></div>
    <div class="button"></div>
  </div>
  </div>
</div>