1
我試圖在一排圖像上獲得覆蓋或框陰影。然後，當您將鼠標懸停在這些圖像上時，該圖像的陰影不透明度應從0.5變爲0.8。我已經嘗試過僞技術，這裏建議：覆蓋/陰影與50％的不透明度超過圖像
How To Get Shadow With Certain Opacity Over Images CSS
正如有人建議在這裏應用的樣式的圖像下面的div：
Why doesn't inset box-shadow work over images?
我+其他幾個人的天堂」能夠弄清楚這一點。活動網站是在這裏：
http://new.gatewaywebdesign.com
我們的目標是讓圖像看起來與其他三個圖像行的上方 - 在商務演示的畫面，商務會議的圖片，女商人的圖片。他們每個人都有50％不透明度的初始盒子陰影 - 然後當你將鼠標懸停在按鈕上時（參見我的工作，聯繫人和訪問店鋪），圖像上的不透明度應從50％變爲80％。我們希望將相同的技術應用於行中的圖像。
HTML：
<div class="row thumbnail-row">
<div class="my-work-image" id="margin-left-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/hamburger-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">The Hamburger Collection</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/yoyomoi-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">YoYoMoi</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/dogs-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Dogs On Duty</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/gateway-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Gateway Web Design</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/chameleon-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Chameleon Web Solutions</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/adrienne-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Adrienne Levin Coleman</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/castaway-thumbnail.jpg" />
<div class="img__description_layer">
<span class="img__description">Castaway Vacations</span>
</div>
</div>
CSS：
.thumbnail-row {
display: flex;
margin-top: 40px;
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}
.thumbnail-row div::after {
position: relative;
top: 0; left: 0;
width: 100%;
height: 100%;
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}
.thumbnail-image {
display: inline-block;
width: 100%;
/*opacity: 0.5;*/
/*box-shadow: inset 0 0 0 4000px rgba(27,61,88,.5)!important;*/
}
.my-work-image{
position:relative;
}
.img__description_layer {
position: absolute;
top: 0;
bottom: 0;
left: 0; /*change it to 50%, if you want the text only shows in the half part */
right: 0;
background: rgba(27,61,88, 0.8);
color: #ffffff;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
text-align:center;
font-family: 'proxima_nova_ltsemibold';
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
/* transition effect. not necessary */
transition: opacity ease-in-out 0.4s, visibility ease-in-out 0.4s;
/*transition: box-shadow 0.4s ease-in-out;*/
}
.my-work-image:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.img__description {
transition: .2s;
transform: translateY(1em);
margin: 0 auto;
}
.my-work-image:hover .img__description {
transform: translateY(0);
}
#margin-left-image {
margin-left: 15px;
}
任何其他的想法得到的圖像有一個初步的盒子陰影呢？
這樣的移動父背後的
imgS' https://jsfiddle.net/vo1npqdx/1275/ –@MichaelCoker是的 - 你添加了什麼風格？ – HappyHands31
酷我會提交一個答案 –