YTSFlix_Go/static/cover.html
2018-11-04 15:58:15 +01:00

52 lines
1.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
html {
background: black;
margin: 0;
padding: 0;
}
.cover {
position: relative;
text-align: center;
margin: 0;
padding: 0;
}
.cover:hover .cover-img{
opacity: 0.5;
}
.cover:hover .icon-play {
opacity: 1;
}
.cover-img {
margin: 0;
padding: 0;
}
.icon-play {
margin: 0;
padding: 0;
color: white;
font-size: 100px;
position: absolute;
left: 50%;
top: 50%;
vertical-align: center;
/*left: 50%;*/
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
opacity: 0;
}
</style>
<div class="cover">
<a href="https://images-na.ssl-images-amazon.com/images/I/71CruJN2sfL._RI_SX200_.jpg">
<img class="cover-img" src="https://images-na.ssl-images-amazon.com/images/I/71CruJN2sfL._RI_SX200_.jpg">
<p class="icon-play"></p>
</a>
</div>
</body>
</html>