Google Photos embed thingy

A while ago, I was trying to embed a Google Photos album into a new website I was creating. But I quickly found that there was no easy way to do this, and I resorted to creating my own plugin for this.

The plugin has three basic parts that you must change from the demo:
A cover image (A square image, at least 300x300 pixels. I recommend hosting via postimages.org)
Album Title (What you'd like the album to show up as on the website)
Google Photos Album URL (You must include this or viewers won't see the album on click)

The rest is already included in my code.

Now, here's how to actually create it.
CSS

.container {
  position: relative;
  width: 180px;
}
.image {
  display: block;
  width: 180px;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #757575;
  overflow: hidden;
  width: 180px;
  height: 0;
  transition: 0.5s ease;
  opacity: 0.8;
  border-radius: 5%;

}
.container:hover .overlay {
  height: 100%;
}
.text {
  color: #000000;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: 'Montserrat', sans-serif;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  text-decoration: none;

}
.container2 {
  position: relative;
  font-family: 'Montserrat', sans-serif;
}
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: white;
  padding-left: 20px;
}
.cursor-on-hover{
cursor: none;
}
.cursor-on-hover:hover{
cursor: pointer;
}

HTML

<td>
<div class="container"><div class="container2">
  <img style="border-radius: 5%;" src="https://i.postimg.cc/"  class="image">
  <div class="text-block">
  <b>title</b></div>
  <div class="overlay"><div style="margin-top: 18px;"><center>
  <img src="https://i.postimg.cc/bvjJn0C5/imageonline-co-transparentimage-8.png" width="150px" class="cursor-on-hover" onclick="window.location.href='https://photos.app.goo.gl/'"></div>
  <div class="text"><a class="text" href="https://photos.app.goo.gl/"><b>View album on Google Photos</b></a></div>
  </div>
  </div>
  </td>

You'll want to replace https://i.postimg.cc/ (third line from the top) with the actual URL of the cover photo
Also replace title (fifth line from the top) with the actual title of your Google Photos album.
Replace https://photos.app.goo.gl/ (on the seventh and eighth lines from the top) with your actual Google Photos album URL

See this CodePen for an example.

Blog

Google Photos embed thingy

cmfdev

Join Our Newsletter. No Spam, Only the good stuff.

Related