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

Question

<div class="container">
  <div class="latest__works__images">
    <img class="latest__works__images__item" alt="" src="img/Works/work_image_1.png">
    <img class="latest__works__images__item" alt="" src="img/Works/work__image__2.png">
    <img class="latest__works__images__item" alt="" src="img/Works/work__image__3.png">
    <img class="latest__works__images__item" alt="" src="img/Works/work__image__4.png">
    <img class="latest__works__images__item" alt="" src="img/Works/work__image__5.png">
    <img class="latest__works__images__item" alt="" src="img/Works/work__image__6.png">
    <img class="latest__works__images__item" alt="" src="img/Works/work__image__7.png">
    <img class="latest__works__images__item" alt="" src="img/Works/work__image__8.png">
    <img class="latest__works__images__item" alt="" src="img/Works/work__image__9.png">
  </div>
</div>

Answer 1

Например такой вариант

.card {
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
}

.card > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.card .hover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(193,50,31,.65);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.card .title {
  font-weight: bold;
  color: #fff;
}

.card .des {
  color: #fff;
  margin: 10px 0;
}

.card .button {
  display: inline-block;
  background: #fff;
  color: #c1321f;
  padding: 8px;
  box-sizing: border-box;
  cursor: pointer;
}

.card .button::after {
  content: '>';
  display: inline;
  margin-left: 5px;
}

<div class="card">
  <img src="https://i.imgur.com/rTvwEDM.png">
  <div class="hover">
    <div class="title">Hair Dresser</div>
    <div class="des">Branding</div>
    <div class="button">View</div>
  </div>
</div>

БЛОГ НА HUSL

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

Ответы (1 шт):