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

(Created page with "<html> <head> <style> ih-item.circle.effect13 .info { background:#333; background:rgba(0,0,0,0.6); opacity:0; pointer-events:none; -webkit-transition:all 0.35s ease-in-out; -...")
 
Line 132: Line 132:
 
transform:translateY(0)}
 
transform:translateY(0)}
  
 +
<!--info-back-->
 +
 +
.info-back{background:#1a4a72;
 +
background:rgba(26,74,114,0.6)}
 +
 +
.info{-webkit-transition:all 0.35s ease-in-out;
 +
-moz-transition:all 0.35s ease-in-out;
 +
transition:all 0.35s ease-in-out;
 +
-webkit-transform-style:preserve-3d;
 +
-moz-transform-style:preserve-3d;
 +
-ms-transform-style:preserve-3d;
 +
-o-transform-style:preserve-3d;
 +
transform-style:preserve-3d}
 +
 +
.info .info-back{visibility:hidden;
 +
border-radius:50%;
 +
width:100%;
 +
height:100%;
 +
background:#333;
 +
background:rgba(0,0,0,0.6);
 +
-webkit-transform:rotate3d(0, 1, 0, 180deg);
 +
-moz-transform:rotate3d(0, 1, 0, 180deg);
 +
-ms-transform:rotate3d(0, 1, 0, 180deg);
 +
-o-transform:rotate3d(0, 1, 0, 180deg);
 +
transform:rotate3d(0, 1, 0, 180deg);
 +
-webkit-backface-visibility:hidden;
 +
backface-visibility:hidden}
 +
 +
.info h3{color:#fff;
 +
text-transform:uppercase;
 +
position:relative;
 +
letter-spacing:2px;
 +
font-size:22px;
 +
margin:0 30px;
 +
padding:55px 0 0 0;
 +
height:110px;
 +
text-shadow:0 0 1px #fff,0 1px 2px rgba(0,0,0,0.3)}
 +
 +
.info p{color:#bbb;
 +
padding:10px 5px;
 +
font-style:italic;
 +
margin:0 30px;
 +
font-size:12px;
 +
border-top:1px solid rgba(255,255,255,0.5)}
 +
 +
a:hover .info{-webkit-transform:rotate3d(0, 1, 0, -180deg);
 +
-moz-transform:rotate3d(0, 1, 0, -180deg);
 +
-ms-transform:rotate3d(0, 1, 0, -180deg);
 +
-o-transform:rotate3d(0, 1, 0, -180deg);
 +
transform:rotate3d(0, 1, 0, -180deg)}
 +
 +
a:hover .info .info-back{visibility:visible}
 
</style>
 
</style>
 
</head>
 
</head>

Revision as of 04:48, 24 October 2017