Question

以下是我的网站：http://www.matthewtbrown.com/newsite/index.html

我想要翻转，图像的类型和顶部和左侧的10px。我不想在翻转之前出现类型。

我指的是我想要的关于我的投资组合的每个缩略图的类型。例如，在我的投资组合的左上角图片中，我希望该类型为“Avid Interplay Production Brochure”，并将其覆盖在图像上。

以下是我的一些css：

.item {
   background: #136073;
   border-style:solid;
   border-color:#fff;
   border-width:1px;
} 

.item img:hover { 
   opacity: 0.3; 
}
.item .text {
   top:10px;
   left:10px;
}
.item .text:hover {
   opacity: 1;
}

Answer 1

当将鼠标悬停在.text元素（可能包含后代.item元素）上时，您似乎希望显示后代img元素。如果是这种情况，那么您只想将:hover伪选择器放在.item选择器上，而不是后代选择器：

.item {
   background: #136073;
   border-style:solid;
   border-color:#fff;
   border-width:1px;
} 

.item:hover img { 
   opacity: 0.3; 
}
.item .text {
   position:absolute; /*Notice this was added to correctly position the element*/
   top:10px;
   left:10px;
}
.item:hover .text {
   opacity: 1;
}

同时

要以跨浏览器方式设置不透明度，您需要设置一些特定于IE的属性：

opacity : 0; zoom : 1; filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter : alpha(opacity=0);

<强>奖金

您可以为transition和img元素设置.text属性，为现代浏览器中的不透明度更改设置动画：

.item img, .item .text { -webkit-transition : opacity 500ms ease-in-out; -moz-transition : opacity 500ms ease-in-out; -ms-transition : opacity 500ms ease-in-out; -o-transition : opacity 500ms ease-in-out; transition : opacity 500ms ease-in-out; }

在这里演示：http://jsfiddle.net/LJnEH/1/

Answer 2

好吧，这是一个问题，我需要一个元素，.item，是相对的，但.text是绝对的。

如何让图像显示在图像上？

2 个答案: