-1

这是我的网站： 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;
}
4

2 回答 2

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/

于 2013-08-10T21:41:42.637 回答
0

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

于 2013-08-12T12:23:07.020 回答