Google PlayストアをHTML形式で表示するにはどうすればよいですか？

Question

私は一部の管理者がGoogle Playストアビューの形でアップロードしたリソースを表示するウェブサイトに取り組んでいます。

これは、以下のもののようになります。

私は、このリソースのCSSビューを作成して、すべてのリソースに対して同じビューを再移植する必要があります。

これは私が今まで実装したものです：

a.imgリスト{ のlist-style-タイプ：なしを。 マージン：0; パディング：0; text-align：center; }

ul.img-list li { 
     display: inline-block; 
     height: 150px; 
     margin: 0 1em 1em 0; 
     position: relative; 
     width: 150px; 
    } 

    .imgWrap:hover .imgDescription { 
     visibility: visible; 
     opacity: 1; 
    } 

    span.text-content span { 
     display: table-cell; 
     text-align: center; 
     vertical-align: middle; 
    } 

    span.text-content { 
     background: rgba(0,0,0,0.5); 
     color: white; 
     cursor: pointer; 
     display: table; 
     height: 150px; 
     left: 0; 
     position: absolute; 
     top: 0; 
     width: 150px; 
     opacity: 0; 
     -webkit-transition: opacity 500ms; 
     -moz-transition: opacity 500ms; 
     -o-transition: opacity 500ms; 
     transition: opacity 500ms; 
    } 

    ul.img-list li:hover span.text-content { 
     opacity: 1; 
    } 
</style> 

私のリソースを表示します。

Answer 1

は、あなたがこの箱のデザインのためのCSSとHTMLを望むここ

.box{width: 180px;background: #fff;box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);margin: 10px;font-family: Arial,sans-serif;} 
 
.box img{width: 100%;} 
 
.box .content{padding: 10px;} 
 
.box p{margin: 7px 0;} 
 
.box .title{color: #333;font-size: 18px;} 
 
.box .price{color: #ed3b3b;float:right;} 
 
.box .author{font-size: 16px;} 
 
.box .desc{font-style: italic;font-size: 14px;color: #616161;}

<div class="box"> 
 
    <img src="https://lh3.googleusercontent.com/apDLpFcXDG-Pal2n8_xhWoKm21OrDT0ib2d-R4rMQVLC6VtojnkYcfibE-JKlZoVisIh=w170-rw"> 
 
    <div class="content"> 
 
    <p class="title"> 
 
    The time machine 
 
    </p> 
 
    <p> 
 
     <span class="author">H.G Wells</span> 
 
     <span class="price">$226.80</span> 
 
    </p> 
 
    <p class="desc"> 
 
    Popular with time machine readers 
 
    </p> 
 
    </div> 
 
    
 
</div>

デモhttps://jsfiddle.net/tsebautr/