aditya aditya - 1 year ago 53
CSS Question

How make Google Play Store like view in HTML?

I am working on a website where I display some resources that have been uploaded by some admin users in the form of a google play store view.

It looks like something below:
enter image description here

I need to make a CSS view of this resource and then repopulate the same view for all the resources.

This is what I have implemented till now:

a.img-list {
list-style-type: none;
margin: 0;
padding: 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;

for displaying my resources.

Answer Source

Try this code

.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="">
  <div class="content">
    <p class="title">
    The time machine
      <span class="author">H.G Wells</span>
      <span class="price">$226.80</span>
    <p class="desc">
  Popular with time machine readers

Demo here