Difference between revisions of "Team:Austin UTexas LASA/team"

Line 2: Line 2:
  
 
<html>
 
<html>
 +
<body>
 +
<br>
 +
</br>
 +
<h1>Our Team</h1>
 +
 +
  <div class="banner-image">
 +
    <img class="img" src="https://c1.staticflickr.com/4/3094/2562106102_0c96e6cfd3_b.jpg">
 +
  </div>
 +
 +
 +
  
−
<head>
 
 
<style>
 
<style>
−
.parallax {
+
.container {
−
    /* The image used */
+
  position: relative;
−
    background-image: url("http://dhiglobal.com/wp-content/uploads/2016/07/placeholder.jpg");
+
  width: 30%;
 +
 +
}
  
−
    /* Set a specific height */
 
−
    min-height: 300px;
 
  
−
    background-attachment: fixed;
+
.image {
−
    background-position: center;
+
  display: block;
−
    background-repeat: no-repeat;
+
  width: 100%;
−
    background-size: cover;
+
  height: auto;
 +
}
 +
 
 +
.overlay {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  transition: .5s ease;
 +
  background-color: #7D5E7F;
 +
}
 +
 
 +
.container:hover .overlay {
 +
  opacity: 1;
 +
}
 +
 
 +
.text {
 +
  color: white;
 +
  font-size: 20px;
 +
  position: absolute;
 +
  top: 25%;
 +
  left: 25%;
 +
  transform: translate(-25%, -25%);
 +
  -ms-transform: translate(-25%, -25%);
 
}
 
}
 
</style>
 
</style>
 
</head>
 
</head>
 +
  
  
 
<body>
 
<body>
−
<br>  
+
<br>
 
</br>
 
</br>
−
<h1>Our Team</h1>
+
<div class="container">
−
 
+
  <img src="http://azuarondesign.com/images/happy-stick-figure-cliparts-10.jpg" alt="Avatar" class="image">
−
  <div class="banner-image">
+
  <div class="overlay">
−
    <img class="img" src="https://c1.staticflickr.com/4/3094/2562106102_0c96e6cfd3_b.jpg">
+
    <div class="text">This is Bob, he is an expert on stuff and likes to do other stuff in his free time</div>
 
   </div>
 
   </div>
 +
</div>
 +
 +
 +
 +
 +
 +
</body>
  
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 02:54, 2 October 2017



Our Team



Avatar
This is Bob, he is an expert on stuff and likes to do other stuff in his free time