Как создать такой фон при наведениие?

Question

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

https://codepen.io/sergey112/pen/jOqBjKY

div{
  width:100px;
  height:100px;
  background-color:red;
  margin:120px auto;
}

<div> </div>

Answer 1

body {
  background: gray;
}

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.grid .item {
  display: block;
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  width: 25%;
  position: relative;
}

.grid .item::before {
  content: '';
  display: block;
  height: 0;
  padding-top: 100%;
  z-index: -1;
}

.grid .item .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
}

.grid .item .info .icon {
  display: block;
  width: 40%;
  border-radius: 6px;
  padding: 5px;
  box-sizing: border-box;
}

.grid .item .info .icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
}

.grid .item .info .title {
  display: block;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid .item:hover .info .icon {
  background: rgba(255,255,255,.45);
}

.grid .item:hover .title {
  color: #fff;
}

<div class="grid">
  <div class="item">
    <div class="info">
      <div class="icon">
        <img src="https://i.imgur.com/HTt1xKg.png">
      </div>
      <div class="title">Новости</div>
    </div>
  </div>
  <div class="item">
    <div class="info">
      <div class="icon">
        <img src="https://i.imgur.com/uF8Dkk1.png">
      </div>
      <div class="title">ru.stackoverflow.com</div>
    </div>
  </div>
</div>

Answer 2

Например, так:

div {
  border: 2px solid #000;
  width: 100px;
  height: 100px;
  background-color: olive;
  position: relative;
}

div::before {
  content: '';
  color: #fff;
  position: absolute;
  width: 150px;
  height: 150px;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

div:hover::before {
  content: 'Как то так';
  opacity: 1;
}

<div>Наведи курсор на меня</div>

БЛОГ НА HUSL

Как создать такой фон при наведениие?

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