Chrome mağazası benzeri ürün sayfası tasarımı

Google'nin Chrome tarayıcısı için yapılmış uygulamaları indrebileceğiniz  sayfayı gördünüz mü bilmiyorum. Tarayıcı üzernden kullanabileceğiniz birçok uygulama ve oyun barındıran bir mağaza. En son olarak masaüstü cihazlar için kullanabileceğini uygulamalarda eklendi. Mağazada herhangi bir uygulama indirmeden önce uygulamanın resminin  üzerine mouseyi getirdiğiniz an uygulama resmi yukarı çıkıyor ve  indirmek için gerekli bağlantılar görünüyor. tarafından jQuery ve Css kullanılarak buna  benzer bir galeri örneği hazırlanmış. Benzerinden  ziyade tıpatıp aynısı desek yeridir. İşin html kısmı biraz fazla bölümden oluşuyor ama kullanılmaya değer  bir tasarım. Bu  galeri örneğini  websitenizin fotoğraf  bölümüne yada anasayfada yayınladığınız yazılar  için kullanırsanız siteniz  için gayet güzel bir görünüm elde edebilirsniz. Birde paylaş butonunda herhangi bir paylaşım sitesi için ayarlanmamış. Sadece buton niyetine duruyor orda. Onun içinde  bi ayarlama yaparsanız  herhangi bi eksiği kalmayacaktır. Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresi :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

JavaScript :

<script>
 $(document).ready(function(){
 $(".product").bind("mouseenter", function(){ 
 $(this).children(".cover").removeClass("show").addClass("hide");
 });
 $(".product").bind("mouseleave", function(){
 $(this).children(".cover").removeClass("hide").addClass("show");
 });
});
 </script>

Css :

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://weloveiconfonts.com/api/?family=entypo);
* {
 box-sizing: border-box;
}

[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}

body {
 font: 12px/16px 'Open Sans', sans-serif;
}
 h3, p {
 margin: 0;
 padding: 0;
 border: 0;
}

button {
 background-color: #1c5ac4;
 border: 0;
 border-radius: 3px;
 font-size: 14px;
 font-weight: 500;
 color: #fff;
 padding: 5px 10px;
}
button a{
 font-size: 14px;
 font-weight: 500;
 color: #fff;
 text-decoration:none;
}
.install {
 text-transform: uppercase;
 width: 100px;
}
.install span {
 margin-right: 5px;
}

.product-grid {
 display: -webkit-flex;
 -webkit-justify-content: center;
 margin-top: 20px;
 min-width: 960px;
}
.product-grid > .product {
 margin-left: -1px;
}
.product-grid > .product:nth-child(1) {
 margin-left: 0;
}

.product {
 width: 240px;
 height: 200px;
 overflow: hidden;
 border: solid #ccc 1px;
}
.product :hover {
 cursor: pointer;
}
.product .slide {
 padding: 20px;
 width: 240px;
 height: 200px;
 min-height: 200px;
}
.product .title {
 font-size: 13px;
}
.product .cover .banner {
 width: 220px;
 height: 140px;
 margin-bottom: 5px;
 margin-left: -10px;
 margin-top: -10px;
}
.product .cover .title {
 width: 75%;
 float: left;
}
.product .cover .meta {
 font-size: 11px;
 color: #888888;
 width: 75%;
}
.product .details {
 background-color: #efefef;
 display: -webkit-flex;
 -webkit-flex-flow: column;
}
.product .details .header {
 width: 100%;
 float: left;
 margin-bottom: 10px;
}
.product .details .header .title, .product .details .header .ratings {
 width: 75%;
}
.product .details .header .ratings {
 font-size: 11px;
}
.product .details .header .ratings .stars {
 margin-right: 5px;
}
.product .details .header .ratings .count {
 color: #888888;
}
.product .details .header .icon {
 float: right;
}
.product .details .actions {
 margin-top: auto;
 text-align: center;
}

.hide {
 margin-top: -200px;
 transition: all 0.2s;
}

.show {
 margin-top: 0px;
 transition: all 0.2s;
}

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

 <div class="product-grid">
 <div class="product">
 <div class="cover slide">
 <img class="banner" src="img/angry-bird.jpg" />
 <h3 class="title">Angry Birds</h3>
 <p class="meta">9.993.275 kullanici</p>
 </div>

 <div class="details slide">
 <div class="header">
  <img class="icon" src="img/angry-small.jpg" />
  <p class="title">Angry Birds</p>
  <p class="ratings"><span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span><span class="count">(10.649)</span></p> 
 </div>

 <div class="content">
  <p class="description">Kuslar! Sapanlar! Yikim! Eglence!</p>
 </div>

 <div class="actions">
  <button class="install"><span class="entypo-plus"></span><a href="https://www.mintik.com/2013/10/15/chrome-magazasi-benzeri-css-resim-galeri-sayfasi/">Ücretsiz</a></button>
  <button class="entypo-share share"></button>
 </div>
 </div><!-- /details slide -->
 </div>