鼠标划过div右上角显示删除叉,瀑布流效果

淡淡的烟草味﹌ 2022-09-20 08:37 199阅读 0赞

## 效果图： ##

![SouthEast][]

## CSS样式： ##

body{
    	margin:0;
    	padding:0;
    	background:url(../bg.gif) 0 0 repeat #f7f5f5;
    	color:#333;
    	font-family:Cambria, Georgia, serif;
    	font-size:15px;
    	overflow-x:hidden;
    }
    
    
    a {
    	color:black;
    	text-decoration:none;
    }
    a:hover, a:active{
    	color:black;
    }
    
    /* clearfix */
    .clearfix {
    	clear:both;
    }
    
    /* container */
    #container
    {
    	position:relative;
    	width:1100px;
    	margin:0 auto 25px;
    	padding-bottom: 10px;
    	
    }
    
    
    
    .grid{
    	width:188px;
    	min-height:100px;
    	padding: 15px;
    	background:#fff;
    	margin:8px;
    	font-size:12px;
    	float:left;
    	box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    	-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    	-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    	
    	-webkit-transition: top 1s ease, left 1s ease;
    	-moz-transition: top 1s ease, left 1s ease;
    	-o-transition: top 1s ease, left 1s ease;
    	-ms-transition: top 1s ease, left 1s ease;
    }
    
    .border
    {
       box-shadow: 2px 2px 3px  rgba(34,25,25,0.4) ;
    	-moz-box-shadow: 2px 2px 3px  rgba(34,25,25,0.4) ;
    	-webkit-box-shadow: 2px 2px 3px rgba(34,25,25,0.4) ;
      cursor:pointer;      
    }
    
    
    .grid .closeimg
    {
        position : absolute;
    	top : -25px;
    	right : -16px;
    	width : 50px;
    	height : 50px;
    	display:none;
    }
    
    .grid strong {
    	border-bottom:1px solid #ccc;
    	margin:10px 0;
    	display:block;
    	padding:0 0 5px;
    	font-size:17px;
    }
    .grid .meta{
    	text-align:right;
    	color:#777;
    	font-style:italic;
    }
    .grid .imgholder img{
    	max-width:100%;
    	background:#ccc;
    	display:block;
    }

## HTML代码：    ##

<div id="container">
            <div class="grid">
                <img src="close_pop.png" class="closeimg" alt="删除商品"  />
                <div class="imgholder">
                    <img src="img27.jpg" width="175px" />
                </div>
                <strong>日落湖</strong>
                <p>
                    和平日落景观......</p>
                <div class="meta">
                    2013年6月6日</div>
            </div>
            <div class="grid">
             <img src="close_pop.png" class="closeimg" alt="删除商品" width="80px" height="80px" />
                <div class="imgholder">
                    <img src="img27.jpg" />
                </div>
                <strong>天国的桥梁</strong>
                <p>
                    桥在哪里？</p>
                <div class="meta">
                    by SigitEko</div>
            </div>
    </div>

## JS代码： ##

## 使用到图片： ##

img27.png

![SouthEast 1][]

close\_pop.png

![SouthEast 2][]

[SouthEast]: /images/20220828/063651f9bbc445f3b847ceaec551657f.png
[SouthEast 1]: /images/20220828/f5686be8ff984f608dced22384d11985.png
[SouthEast 2]: /images/20220828/e8bc0dd6ecd042fab17c0d64c2e72bb4.png