Как наложить изображение на элемент div

Question

У меня есть элемент, который в основном представляет собой прямоугольную рамку, которая содержит некоторые другие элементы, состоящие в основном из текста.

Мне нужно знать, как наложить изображение на этот прямоугольный пограничный элемент при наведении на него элемента.

Ниже приведен мой код.До сих пор мне удалось наложить красный прямоугольник, но я не уверен, как вместо этого наложить изображение.

.container {
  position: relative;
  width: 100px;
  ;
  max-width: 400px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}

.container:hover .overlay {
  opacity: 1;
}

#square {
  background-color: grey;
  width: 100px;
  height: 100px;
}

<div class="container">
  <div id="square">
  </div>
  <div class="overlay">
    <a href="#"> </a>
  </div>
</div>

Answer 1

HTML

<div class="rectangle-wrapper">
  <h1>Big Title</h1>
  <p>Long description. Probably needs to be longer. Lorem ipsummmmmm.</p>
</div>

CSS

.rectangle-wrapper {
border: 5px solid black;
}


.rectangle-wrapper:hover {
  background-image: url(https://via.placeholder.com/350x150);
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center center;
}

Fiddle: https://jsfiddle.net/srtk05mx/2/

EDIT: Fiddle с использованием вашего кода: https://jsfiddle.net/srtk05mx/3/

Теперь, если вы действительно хотите, чтобы изображение было только на границе, вам придется использовать другую технику.

Answer 2

Вы можете изменить background-color на background-image и установить атрибут фона путем изменения #square и изменить opacity с 1 на меньший, например, 0,3

#square {
  background-image: url('https://cdn.pixabay.com/photo/2016/07/21/15/14/girl-1532733_960_720.jpg');
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  position: relative;
  width: 100px;
  ;
  max-width: 400px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}

.container:hover .overlay {
  opacity: .3;
}

#square {
  background-image: url('https://cdn.pixabay.com/photo/2016/07/21/15/14/girl-1532733_960_720.jpg');
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="container">
  <div id="square">
  </div>
  <div class="overlay">
    <a href="#"> </a>
  </div>
</div>