CODEWITHSUNDEEP
javascriptjquerycssbackground-color
Maren
Maren

Reputation: 61

Background of page colors based on an image

I am attempting to make the background color of my div change based on it's containing image. I have seen similar effects on Google, Pinterest et cetera where the color are displayed before the image. Preferably more than one color, maybe as a gradient. Any ideas? Thanks!

Upvotes: 2

Views: 476

Answers (1)

Neil
Neil

Reputation: 14323

This can be accomplished via an image blur.

.container {
  position:fixed;
  width:200px;
  height:150px;
  border: 1px solid black;
  border-radius: 2px;
  overflow:hidden;
}

.background {
  width: calc(100% + 40px);
  margin-left: -40px;
  margin-top: -40px
  height:calc(100% + 40px);
  position:absolute;
  z-index:-1;
  filter: blur(40px);
}

.foreground {
  border:solid 1px black;
  max-width:150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="container">
  <img class="background" src="https://i.imgur.com/PHEgdUj.jpeg" />
  <img class="foreground" src="https://i.imgur.com/PHEgdUj.jpeg" />
</div>

Upvotes: 3

Related Questions