Untitled

<!DOCTYPE html>
<html>
<head>
<a href="https://sites.google.com/view/emmameriwether/work/forman-house">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

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

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>
</head>
<body>


<div class="container">
  <img src="https://drive.google.com/uc?export=view&id=1jbhXLA0EWnMEbebiH2V7Tu3kN4orDaTf" alt="Beltline Park" class="image">
  <div class="overlay">
    <div class="overlay">
    <img src="https://drive.google.com/uc?export=view&id=1vDLH82JnqhtMNXV28vsxL4bLDIM6yUIV" alt="Beltline Park" class="image">
  </div>
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var img = document.querySelector('.image-container img');
            img.addEventListener('touchstart', function() {
                img.style.transform = 'scale(1.1)';
            }, false);

            img.addEventListener('touchend', function() {
                img.style.transform = 'scale(1)';
            }, false);
        });
    </script>

</body>
</html>
</a>
Editor is loading...