悬停图片产品展示产品说明

Question

你好，我想创建一个悬停动画与CSS HTML展示产品信息时，我喜欢这个http://www.ikea.gr/epipla-grafeiou/grafeia-kai-trapezia/grafeia/

在图像上悬停预先感谢您

<style> 
    body{width:600px; margin:0 auto;} 
    .product{float:left; width:200px;} 
    .product:hover{border:1px solid #dedede;} 
    .text{color:#000; display:none;} 
    .proimg:hover +.text{color:red; display:block;} 

</style> 

<div class="product"> 
    <img class="proimg"src="0.jpg" alt="" /> 
    <p class="text">lorem ipsum</p> 
</div> 

Answer 1

要做一个这样的效果，你应该使用具有放置的高度和宽度的列表项来排列产品，并使用'display:inline-block;'横向对齐它们。然后，您应该在该列表项中插入一个'<a>'标签，并将额外信息放入插入此'<a>'标签中的'<div>'标签中。

演示：http://jsfiddle.net/vgfLa353/

HTML：

<ul class="products"> 
    <li> 
     <a> 
      <div class="image" style="background-image:url(http://www.blogdobg.com.br/wp-content/uploads/2012/08/seu-madruga.jpg);"></div> 
      <h1>Information 1</h1> 
      <h2>Information 2</h2> 
      <div class="informations"> 
      <p>any aditional information you want here bla bla bla bla lorem ipsum bacon yeah</p> 
       <label><input type="checkbox"/>checkbox</label> 
      </div> 
     </a> 
    </li> 
</ul> 

CSS：

.products { 
    display:block; 
    width:100%; 
    height:100%; 
    position:relative; 
    margin:0px; 
    padding:0px; 
    font-size:0px; 
    list-style:none; 
} 

.products li { 
    display:inline-block; 
    width:200px; 
    height:237px; 
    position:relative; 
    margin:0px; 
    padding:0px; 
    z-index:1; 
} 

.products li:hover { 
    z-index:2; 
} 

.products li a { 
    display:block; 
    width:180px; 
    height:auto; 
    padding:10px; 
    position:absolute; 
    background-color:white; 
    cursor:pointer; 
} 

.products li:hover a { 
    box-shadow:0px 0px 5px rgba(0,0,0,0.5); 
    -moz-box-shadow:0px 0px 5px rgba(0,0,0,0.5); 
    -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.5); 
    -o-box-shadow:0px 0px 5px rgba(0,0,0,0.5); 
    -ms-box-shadow:0px 0px 5px rgba(0,0,0,0.5); 
} 

.products li a .image { 
    display:block; 
    height:150px; 
    position:relative; 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-size:contain; 
    background-color:black; 
} 

.products li a h1 { 
    display:block; 
    height:auto; 
    margin:10px 0px; 
    font-family:arial; 
    font-size:20px; 
    font-weight:bold; 
} 

.products li a h2 { 
    display:block; 
    height:auto; 
    margin:10px 0px; 
    font-family:arial; 
    font-size:12px; 
    font-weight:normal; 
} 

.products li a .informations { 
    display:none; 
} 

.products li a .informations p, 
.products li a .informations label { 
    display:block; 
    height:auto; 
    margin:10px 0px; 
    font-family:arial; 
    font-size:10px; 
    color:grey; 
    font-weight:normal; 
} 

.products li:hover a .informations { 
    display:block; 
}