小编Tdo*_*com的帖子

Bootstrap覆盖问题

我有CSS覆盖问题.覆盖图案不会在图像大小的整个宽度上拉伸.左侧总是有一个小边框.有任何想法吗？ http://www.bootply.com/FrnoIvUpxS

.img-container {
    position: relative;
    cursor: pointer;
    display: table;
    overflow:hidden;
text-align:center;  
width:100%;
min-height: 360px;
}

.img-container img {
 opacity: 1;
    position: absolute;
    min-height:360px;
    width: 500px;
}


.img-container .overlay {

    position: relative;

    height: 100%;
    vertical-align:middle;
    display: table-cell;
    background-color:rgba(130,216,209,0.00);
    opacity:0.0;
}


.img-container p{
    width:inherit;
    margin-top:25px;
    } 
.img-container h3 {

     } 
.img-container:hover .overlay {
background-color:rgba(130,216,209,0.9); 

        opacity:1;
 }
 .img-container:hover img{
        -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity:1;}

    .img-container:hover p, .img-container:hover h3 { }

Run Code Online (Sandbox Code Playgroud)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div …

Run Code Online (Sandbox Code Playgroud)

html css overlay css3 twitter-bootstrap

Tdo*_*com

2015 08-15

5
推荐指数

1
解决办法

1263
查看次数