Difference between revisions of "Team:TP-CC San Diego/Templates/AnimationCSS"

Line 2: Line 2:
 
<head>
 
<head>
 
<style>
 
<style>
 +
 +
<html>
 +
<style>
 +
.main-title {
 +
  padding: 40px 80px 40px 80px;
 +
  font-size: 50px;
 +
  margin-top: 6%;
 +
}
 +
 +
.fade-in{
 +
  animation: opac 2s
 +
}
 +
@keyframes opac{
 +
from{opacity:0}
 +
to{opacity:1}}
 +
 +
.container
 +
{
 +
  width: 93%;
 +
  height: 100%;
 +
  background-color: none;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 +
.icon-wrapper
 +
{
 +
  display: inline-block;
 +
  width: 27.3%;
 +
  height: 400px;
 +
  background-color: none;
 +
  padding: 3%;
 +
  float: left;
 +
  text-align: center;
 +
}
 +
 +
.icon
 +
{
 +
  width:100%;
 +
  height: 100%;
 +
  margin: 0 auto auto auto;
 +
}
 +
 +
.icon img
 +
{
 +
  position: block;
 +
  width: 100%;
 +
  height: 95%;
 +
}
 +
 +
.icon-wrapper h3
 +
{
 +
  position: relative;
 +
  margin: auto;
 +
  top: -15%;
 +
  text-align: center;
 +
}
 +
 +
.imageDiv
 +
{
 +
    display: inline-block;
 +
    padding: 1%;
 +
 +
}
 +
 +
.page-title
 +
{
 +
  margin: 0 auto auto auto;
 +
  font-size: 20px;
 +
  font-family: 'Poppins', sans-serif;
 +
  color: black;
 +
  text-align: center;
 +
}
 +
   
 
.ih-item.circle.effect10 .img {
 
.ih-item.circle.effect10 .img {
 
   z-index: 11;
 
   z-index: 11;
Line 209: Line 283:
 
.ih-item.circle {
 
.ih-item.circle {
 
position: relative;
 
position: relative;
−
width: 400px;
+
width: 220px;
−
height: 400px;
+
height: 220px;
 
border-radius: 50%
 
border-radius: 50%
 
}
 
}
Line 216: Line 290:
 
.ih-item.circle .img {
 
.ih-item.circle .img {
 
position: relative;
 
position: relative;
−
width: 400px;
+
width: 220px;
−
height: 400px;
+
height: 220px;
 
border-radius: 50%
 
border-radius: 50%
 
}
 
}
Line 228: Line 302:
 
height: 100%;
 
height: 100%;
 
border-radius: 50%;
 
border-radius: 50%;
−
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
 
 
-webkit-transition: all 0.35s ease-in-out;
 
-webkit-transition: all 0.35s ease-in-out;
 
-moz-transition: all 0.35s ease-in-out;
 
-moz-transition: all 0.35s ease-in-out;
Line 264: Line 337:
  
 
.ih-item.circle.effect10.colored .info {
 
.ih-item.circle.effect10.colored .info {
−
background: #1a4a72
+
background: white;
 
}
 
}
  
 
.ih-item.circle.effect10 .info {
 
.ih-item.circle.effect10 .info {
−
background: #333;
+
background: white;
 
opacity: 0;
 
opacity: 0;
 
-webkit-transform: scale(0);
 
-webkit-transform: scale(0);
Line 281: Line 354:
  
 
.ih-item.circle.effect10 .info h3 {
 
.ih-item.circle.effect10 .info h3 {
−
color: #fff;
+
color: black;
 
text-transform: uppercase;
 
text-transform: uppercase;
 
position: relative;
 
position: relative;
Line 289: Line 362:
 
}
 
}
  
−
.ih-item.circle.effect10 .info p {
 
−
color: #bbb;
 
−
font-style: italic;
 
−
font-size: 12px;
 
−
border-top: 1px solid rgba(255, 255, 255, 0.5)
 
−
}
 
  
 
.ih-item.circle.effect10 a:hover .info {
 
.ih-item.circle.effect10 a:hover .info {
Line 343: Line 410:
 
transform: translateY(-50px) scale(0.5)
 
transform: translateY(-50px) scale(0.5)
 
}
 
}
 +
 +
 +
 +
</style>
 +
 +
<body>
 +
 +
    <div class="ih-item circle effect10 top_to_bottom"><a href="#">
 +
        <div class="img"><img src="https://static.igem.org/mediawiki/2017/archive/e/e4/20171023064510%21T--TP-CC_San_Diego--brain.png" alt="img"></div>
 +
        <div class="info">
 +
          <h3>Project Description</h3>
 +
        </div></a></div>
 +
 +
<div class="ih-item circle effect13 from_left_and_right"><a href="#">
 +
        <div class="img"><img src="https://static.igem.org/mediawiki/2017/archive/e/e4/20171023064510%21T--TP-CC_San_Diego--brain.png" alt="img"></div>
 +
        <div class="info">
 +
          <div class="info-back">
 +
            <h3>Project Description</h3>
 +
          </div>
 +
</div></a>
 +
    </div>
 +
 +
 +
 +
</body>
 +
</html>
  
 
</style>
 
</style>

Revision as of 06:56, 24 October 2017

img

Project Description

img

Project Description

</style> </head> <body> </body> </html>