Военные корабли
Код:
<!--HTML-->
<style>
.tile {
height: 180px;
width: 180px;
margin: 0 auto 30px;
position: relative;
float: left;
}
.tile img{
width:180px;
height:180px;
}
.overlay {
height: 180px;
width: 180px;
position: absolute;
left: 0;
bottom: 0;
background-color: #dde5e8;
opacity: 0;
}
.overlay-content {
text-align: center;
position: relative;
top: 40%;
font: Jura;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.tile:hover .overlay, .tile:focus .overlay {
opacity: 1;
}
.overlay .title {
font-weight: 400;
}
.overlay h3 a, .overlay h4 {
color: #fff;
}
.overlay h3 {
margin: 0 0 20px;
font-size: 22px;
text-transform: uppercase;
line-height: 1.2;
}
.overlay h4 {
margin: 0;
font-size: 18px;
}
.overlay h4:first-of-type {
margin: 20px 0 2px;
}
a, div, path {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
</style>
<div>
<div class="tile">
<div class="overlay" href="" target="_blank" alt="Ismet.me"><div class="overlay-content">
<span class="title">Военный корвет, используется для защиты транспортных суден флота и суден с тяжелой артиллерией. Оснащен ионными пушками и прочными щитами.</span>
</div>
</div> <img src="http://sg.uploads.ru/VyixI.jpg" alt="Ismet.me" title="Project"></div>
</div><div>
<div>
<div class="tile">
<div class="overlay" href="" target="_blank" alt="Ismet.me"><div class="overlay-content">
<span class="title">Легкий разрушитель, вооруженный ионными пушками. Достаточно маневренный, но оснащен не слишком прочными щитами.</span>
</div>
</div> <img src="http://sh.uploads.ru/5zvkK.jpg" alt="Ismet.me" title="Project"></div>
</div><div>
<div>
<div class="tile">
<div class="overlay" href="" target="_blank" alt="Ismet.me"><div class="overlay-content">
<span class="title">Разрушитель, перевозящий на своем борту тысячи солдат, военную технику. Оснащен торпедными установками и турболазерами.</span>
</div>
</div> <img src="http://sg.uploads.ru/3uEg5.jpg" alt="Ismet.me" title="Project"></div>
</div><div>
<div>
<div class="tile">
<div class="overlay" href="" target="_blank" alt="Ismet.me"><div class="overlay-content">
<span class="title"> Истребитель. Быстрый, маневренный, значительно уступает "Яростному" размерами, но отнюдь не вооружением. Оснащен двумя пушками, торпедной установкой и прочными щитами.</span>
</div>
</div> <img src="http://sh.uploads.ru/e1iMc.jpg" alt="Ismet.me" title="Project"></div>
</div><div>
