CODEWITHSUNDEEP
csshtml
Steel
Steel

Reputation: 517

How to overlay an image onto a div element

I have a element that is basically a rectangular border that contains some other elements consisting mostly of text.

I need to know how to overlay an image onto this rectangular border element when hovering over the element.

Below is my code so far. I have been able to overlay a red rectangle so far, but I am unsure how to overlay an image instead.

.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>

Upvotes: 0

Views: 175

Answers (2)

Hien Nguyen
Hien Nguyen

Reputation: 18973

You can change background-color by background-image and set background attribute by change #square and change opacity from 1 to smaller like 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>

Upvotes: 0

4ndy
4ndy

Reputation: 458

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 using your code: https://jsfiddle.net/srtk05mx/3/

Now if you really want the image just on the border, you would have to use a different technique.

Upvotes: 1

Related Questions