上添加3個不同的按鈕來半透明區域

如何添加半透明區域（<figcaption>）和所有3個按鈕內部的兩個以上圖像的按鈕被垂直居中和在半透明區域內均勻分佈？
我添加的按鈕似乎是半透明的（與<figcaption>不透明度相同）。我需要的按鈕是opacity:1;？

這是代碼：

<div class="container demo-2"> 
<ul class="grid cs-style-2"> 
<li> 
<figure> 
<gt_descA>Chair</gt_descA> 
<gt_descC>$87.34</gt_descC> 
<img src="imagez/designs/thumbs/0/01.jpg" alt="img02"> 
<figcaption> 
<a href="index.html" onClick=""><span class="hint hint--top hint--rounded" data-hint="Zoom Image"><img src="additional/buttons/bu_zoom.jpg"></img></span></a> 
</figcaption> 
</figure> 
</li> 
</ul> 
</div>

CSS

.grid { 
    padding: 70px 20px 100px 20px; 
    max-width: 1300px; 
    margin: 0 auto; 
    list-style: none; 
    text-align: center; 
} 

.grid li { 
    display: inline-block; 
    width: 234px; 
    margin: 0; 
    padding: 20px; 
    text-align: left; 
    position: relative; 
} 

.grid figure { 
    margin: 0; 
    position: relative; 
} 

.grid figure img { 
    max-width: 100%; 
    display: block; 
    position: relative; 
} 

.grid figcaption { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 20px; 
    background: #000; 
    color: #ed4e6e; 
    opacity:0; 
} 

/*button*/ 
.grid figcaption a { 
    display: inline-block; 
} 

/* Caption Style*/ 
.cs-style-2 figure figcaption { 
    z-index: 10; 
    -webkit-transition: -webkit-transform 0.4s; 
    -moz-transition: -moz-transform 0.4s; 
    transition: transform 0.4s; 
} 

.no-touch .cs-style-2 figure:hover figcaption, 
.cs-style-2 figure.cs-hover figcaption { 
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
    -ms-transform: translateY(0px); 
    transform: translateY(0px); 
    opacity:0.6; 
} 

.cs-style-2 figcaption { 
    height: 24px; 
    width: 187px; 
    top: auto; 
    bottom: 0px; 
} 

.cs-style-2 figcaption a { 
    position: absolute; 
    right: 20px; 
    top: 30px; 
} 

@media screen and (max-width: 31.5em) { 
    .grid { 
     padding: 10px 10px 100px 10px; 
    } 
    .grid li { 
     width: 100%; 
     min-width: 234px; 
    } 
}

來源

2013-12-17 NathaliaZeed

您可以添加按鈕，並對齊它們使用

container { 
    text-align: center; 
}

或者這樣：

container { 
    max-width: someval; 
    margin: 0 auto; // no vertical, auto horizontal 
}

而alpha濾鏡（不透明度）也被添加到子元素！嘗試爲他們設置價值;分別..

來源

2013-12-17 16:33:34

謝謝@Afzaal。 – NathaliaZeed

上添加3個不同的按鈕來半透明區域

回答

相關問題