Difference between revisions of "Team:BOKU-Vienna/Team"

Line 124: Line 124:
 
                   <img src="https://static.igem.org/mediawiki/2017/6/64/Michi.jpeg" class="img-circle teammember bgscroll" alt="Michael" >  
 
                   <img src="https://static.igem.org/mediawiki/2017/6/64/Michi.jpeg" class="img-circle teammember bgscroll" alt="Michael" >  
 
                   </a> <p> Michael </p>
 
                   </a> <p> Michael </p>
 +
.overlay {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  transition: .5s ease;
 +
  background-color: #008CBA;
 +
}
 +
 +
.container:hover .overlay {
 +
  opacity: 1;
 +
}
 +
 +
.text {
 +
  color: white;
 +
  font-size: 20px;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%);
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 +
<h2>Fade in Overlay</h2>
 +
<p>Hover over the image to see the effect.</p>
 +
 +
<div class="container">
 +
  <img src="img_avatar.png" alt="Avatar" class="image">
 +
  <div class="overlay">
 +
    <div class="text">Hello World</div>
 +
  </div>
 +
</div>
 
                 </div>
 
                 </div>
 +
 +
 +
 
                 <div class="col-md-6">
 
                 <div class="col-md-6">
 
                   <a href="https://static.igem.org/mediawiki/2017/1/11/Isabella.gif">
 
                   <a href="https://static.igem.org/mediawiki/2017/1/11/Isabella.gif">

Revision as of 11:44, 26 June 2017

Team

V

Team

Michael

Michael

.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }

Fade in Overlay

Hover over the image to see the effect.

Avatar
Hello World
Isabella

Isabella

Mathias

Mathias

Josef

Josef

Advisors

Our advisors will be listed here soon.