<style type="text/css">
.data a {text-decoration:none; outline:none;}
.data {float:left; margin:10px; position:relative; overflow:hidden; background:#000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}
.data:after {content:""; display:block; width:100%; height:100%; background:transparent; position:absolute; left:0; top:0;
-webkit-transition:0s 0.7s;
-o-transition:0s 0.7s;
transition:0s 0.7s;
}
.data img {opacity:1; border:0; display:block;
-webkit-transition:0.4s 1.4s;
-o-transition:0.4s 1.4s;
transition:0.4s 1.4s;
}
.data:hover img {opacity:0.5;
-webkit-transition:0.4s 0.2s;
-o-transition:0.4s 0.2s;
transition:0.4s 0.2s;
}
.data a:before,
.data a:after {display:block; position:absolute; z-index:10; width:90%;}
.data a:before {content:attr(data-heading); top:0; height:20%; background:#069; padding:0 5%; color:#fff;
font:normal 22px/200% 'texgyreadventorbold', 'lucida sans', arial, sans-serif;
-webkit-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: 0.4s 1s;
-o-transition: 0.4s 1s;
transition: 0.4s 1s;
}
.data a:after {content:attr(data-text); top:20%; height:80%; background:#bcd; padding:5%; color:#000;
font:normal 12px/16px 'texgyreadventorregular', 'lucida sans', arial, sans-serif;
-webkit-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: 0.4s 0.6s;
-o-transition: 0.4s 0.6s;
transition: 0.4s 0.6s;
}
.data:hover:after {left:-100%;}
.data:hover a:before,
.data:hover a:after {
-webkit-transform:translateY(0%);
-o-transform:translateY(0%);
transform:translateY(0%);
}
.data:hover a:before {
-webkit-transition:0.4s 0.6s;
-o-transition:0.4s 0.6s;
transition:0.4s 0.6s;
}
.data:hover a:after {
-webkit-transition:0.4s 1s;
-o-transition:0.4s 1s;
transition:0.4s 1s;
}
</style>
<br>
<div class ="data"><a href="#" data-heading="Red-eyed Frog" data-text="Red-eyed tree frogs, as their name states, have bold red
eyes with vertically narrowed pupils, a vibrant green body with yellow and blue striped sides, and orange toes. There is a great deal of
regional variation in flank and thigh coloration. Although it has been suggested that A. callidryas' bright colors function as aposematic or
sexual signals, neither of these hypotheses have been confirmed. Click/tap for more information."><img src="frog.jpg" alt="Red-eyed Frog"></a>
</div>
<div class ="data"><a href="#" data-heading="Emperor Penguin" data-text="The Emperor Penguin (Aptenodytes forsteri) is the
tallest and heaviest of all living penguin species and is endemic to Antarctica. The male and female are similar in plumage and size,
reaching 122 cm (48 in) in height and weighing anywhere from 22-37 kg (48-82 lb). The dorsal parts are black and sharply delineated
from the white belly, pale-yellow breast and bright-yellow ear patches. Click/tap for more information."><img src="emperor.jpg"
alt="Emperor Penguin"></a></div>
<div class ="data"><a href="#" data-heading="Pelicans" data-text="A pelican is a large water bird with a
distinctive pouch under the beak, belonging to the bird family Pelecanidae. Along with the darters, cormorants, gannets,
boobies, frigatebirds, and tropicbirds, pelicans make up the order Pelecaniformes. Modern pelicans are found on all
continents except Antarctica. Click/tap for more information."><img src="pelican.jpg" alt="Pelicans"></a></div>
<br class ="clear"><br>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
|