我是HTML和CSS的学习者。 我正在尝试将带有图像的文本放在其顶部。 我的要求是能够隐藏图像(可能使用opacity )。 我选择模仿的样本(仅出于学习目的)是这里的所有.dribbblehttps : .dribbble

CSS / HTML:

 #images { border: 0.25em solid red; overflow:auto; width:30%; } #images > figure { margin: 1em; float:left; width: 80%; position: relative; } /* #images > figure > a { max-width:30%; height: 10%; } */ #images > figure > img { /* max-height:50%; */ /* max-width: 80%; */ border-radius:25%; position: relative; max-width:100%; z-index: 0; } #images > figure > img:hover { z-index: -3; opacity:.1; } #images > figure > div.hidden { position: absolute; top:0px; left: 10px; opacity:0; width: 100%; height:100%; /* z-index: -0; */ /* overflow:hidden; */ } #images > figure > div.hidden:hover { opacity:1; /* height:100%; */ /* z-index: -1; */ } 
 <section id="images"> <figure> <img alt="first" src="http://farm4.static.flickr.com/3221/2658147888_826edc8465.jpg" > <div class="hidden"> <span> Howdy <br /> </span> </div> </figure> </section> 

我的无效代码也可以在这里找到: http : //jsfiddle.net/5RJTc/

请就我在这里遗漏的地方或我在做错的事情对我进行指导,以便我可以学习如何制作出这样的好东西。

===============>>#1 票数:1 已采纳

请参阅http://jsfiddle.net/roberttang30/5RJTc/4/

CSS / HTML:

 #images { position: relative; height: 100px; width: 133px; text-align: center; border-color: red; border-style: solid; } .images { height: 100%; /*The following lines simply add the fade out effect and are optinal*/ -o-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .hidden { z-index: -1; position: absolute; top: 0; } .images:hover { opacity: 0; } 
 <div id="images"> <img alt="first" id="1" class="images" src="http://farm4.static.flickr.com/3221/2658147888_826edc8465.jpg"> <div class="hidden"> Howdy </div> </div> 

  ask by GodMan translate from so

未解决问题?本站智能推荐:

1回复

不显示背景图像和文本不按图像排列

我相信这两个是最简单的新手错误,但我没有足够的经验来修复它们。 出于某种原因,一旦我设置了完整容器的背景,背景就位,但它显示了文本背后的正文背景,我不希望这样。 另一个问题是文本,我不知道如何使它在图像的一侧对齐,就像我的网站计划。 这是问题的图片: 点击查看图片 这就是我想
1回复

我如何使用CSS使文本适合图像

我有一幅需要在其中显示表单的图像,但是当我添加更多标签和文本时,它将变得混乱: 这是我的代码:
1回复

如何将html文本框与我的图像对齐?

如何与他们保持一致 我的HTML代码
2回复

初学者:使用HTML和CSS创建存储桶

我试图通过将标头图片放在底部图片的顶部来在HTML和CSS中创建存储桶。 当我在Dreamweaver中执行此操作时,两个对象之间没有缝隙。 但是,当我将其上传到服务器时,两个图像之间会出现间隙。 有什么帮助或建议吗? CSS:
3回复

什么时候使用class / id,什么时候直接定位html标签[关闭]

我有另一个关于html / css最佳做法的问题。 我检查了Web和该网站,但所有内容都出现在有关何时使用ID和何时使用类的文章中。 但是,这不是我所努力的。 我想知道何时在html元素选择器上使用类选择器,反之亦然。 例: 的HTML CSS选项1: CS
3回复

将简单的布局表转换为div宽度不起作用可能是最好的表

我是所有使用表的人之一,但是现在不赞成使用某些表属性时,我不得不切换到divs CSS,所以我有一个简单的布局表,需要更改为divs,但我无法使其按需工作。 3列布局必须具有:左列200px宽度和100%高度,右列也必须200px宽度和100%高度,但是中间列我将在其中放置内容,因此它必须
5回复

如何在css3圈子内垂直对齐某些文本?

我在这里有这三个内联元素,试图用css3使其成一个圆,但是问题是当我添加css3样式时,圆内的文本未垂直对齐,所以我的问题是如何确保无论圆圈内的字体大小/字体/字体/浏览器/字体大小都将垂直对齐? .num { font-size: 30px; font-weight: bold
1回复

如何使容器内的div具有与其他div兄弟同尺寸的图像?

我有一个名为“ nav”的父div容器,它充当导航栏,而子div则充当选择项。 问题:我想在此导航栏内向左一直放一个图像。 但是,除非我使div“徽标”具有固定的宽度和高度,否则它根本不会显示(没有宽度)。 当我这样做时,图像将无法适当地调整大小以适合div内部。 我只看到图像的一部
2回复

CSS div无法填充顶部和左侧

我试图通过将标题内容放在具有固定位置的div中来制作固定标题。 以下是div的CSS代码: 这是我的div的效果(左上角的屏幕截图): 您可以清楚地看到div(白色部分)和页面之间有一个空格,而右侧不是这种情况,我该如何摆脱这个空格? 谢谢。
2回复

div中的图像会影响外部div

目前,我正在尝试将图片放在div的顶部。 div是水平的,我不知道为什么,但是当我放置图像时,其位置会影响所有外部div ...我的意思是,图像应仅影响放置它的div。 我知道很难理解这一点,我对div进行了捕获: Capture 。 如您所见,图像的高度会影响外部div。 这是