2014-09-26 166 views
0

我正在尝试为我的网站添加样式。这是超级简单,但我已经尝试了几个小时,并无法实现它的工作。预览在这里:http://efthemespage02.tumblr.com/,我想要做的就是当你将鼠标悬停在图像(gif)上时,出现一个标题(图像在背景中不透明)。这是我现在的编码。将鼠标悬停在图像上时出现文字

风格/ CSS:

#wow { 
    margin-top:105px; 
    margin-left: 320px; 
    -webkit-transition: opacity 0.8s ease-in-out; 
    -moz-transition: opacity 0.8s ease-in-out; 
    -o-transition: opacity 0.8s ease-in-out; 
    -ms-transition: opacity 0.8s ease-in-out; 
    transition: opacity 0.8s ease-in-out; 
    } 

    #wow img { 
    opacity:1; 
    width:560px; 
    height:auto; 
    padding:5px; 
    border: 1px solid #bbb8b8; 
    } 

    #wow img:hover { 
     opacity: 0.4; 
     -webkit-transition: opacity 0.4s ease-in-out; 
    -moz-transition: opacity 0.4s ease-in-out; 
    -o-transition: opacity 0.4s ease-in-out; 
    -ms-transition: opacity 0.4s ease-in-out; 
    transition: opacity 0.4s ease-in-out; 
    } 

实际的HTML:

<div id="wow""><img src=""http://media.tumblr.com/30ad609089a2d306c77f3de99a184a4c/tumblr_inline_mpq7oro2491qz4rgp.gif"></div> 

好了,所以基本上我不知道我在做什么。我尝试过使用每个可用的在线资源来尝试并找出它,但没有任何工作。谢谢你的帮助!

+0

我没有看到标题......它在哪里? – andufo 2014-09-26 02:52:20

+0

你能提供一个这样的小提琴吗? – 2014-09-26 02:56:41

回答

0

只要能使你的HTML变化不大,包括你的文字是这样的:

<div class="wow"> 
    <img src="http://media.tumblr.com/30ad609089a2d306c77f3de99a184a4c/tumblr_inline_mpq7oro2491qz4rgp.gif" alt="" /> 
    <div class="overlay">This is some text</div> 
</div> 

,然后在你的CSS,因为你的示例站点将需要使用固定的宽度,这将缓解一切,所以让我们一起走一些非常直的,只是一些定位和悬停状态,没有什么奇特的。唯一重要的是我摆脱了ID并将它们替换为类,以便您可以在需要时重新使用样式,而不是在图像上设置悬停状态样式,我添加了一个包含文本的.overlay类并具有背景,大小,块属性等,以便于操作。请参见下面的代码:

.wow { 
    position:relative; 
    width:560px; 
    height:310px; 
    -webkit-transition: opacity 0.8s ease-in-out; 
    -moz-transition: opacity 0.8s ease-in-out; 
    -o-transition: opacity 0.8s ease-in-out; 
    -ms-transition: opacity 0.8s ease-in-out; 
    transition: opacity 0.8s ease-in-out; 
} 
.wow img { 
    position:relative; 
    top:0; 
    left:0; 
    z-index:1 
} 
.overlay { 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    z-index:2; 
    opacity:0; 
    -webkit-transition: opacity 0.4s ease-in-out; 
    -moz-transition: opacity 0.4s ease-in-out; 
    -o-transition: opacity 0.4s ease-in-out; 
    -ms-transition: opacity 0.4s ease-in-out; 
    transition: opacity 0.4s ease-in-out; 
} 
.wow:hover > .overlay { 
    opacity:1; 
    width:560px; 
    height:310px height:auto; 
    padding:5px; 
    display:block; 
    background:rgba(255, 255, 255, 0.4) 
} 

你会发现,我使用或多或少您的样式,所以你并不遥远

可以see a fiddle here

0

您可以省略此您的代码

#wow img:hover { 
    opacity: 0.4; 
    -webkit-transition: opacity 0.4s ease-in-out; 
    -moz-transition: opacity 0.4s ease-in-out; 
    -o-transition: opacity 0.4s ease-in-out; 
    -ms-transition: opacity 0.4s ease-in-out; 
    transition: opacity 0.4s ease-in-out; 
} 

并通过使用z-index:2设置您的新图像。然后,您更改坐在原始图像顶部的新图像的不透明度。

Click here to see an example fiddle

HTML:

<div id="wow"> 
     <img src="http://media.tumblr.com/30ad609089a2d306c77f3de99a184a4c/tumblr_inline_mpq7oro2491qz4rgp.gif"> 
    <div class="newImage"> 
     <img src="http://media.tumblr.com/30ad609089a2d306c77f3de99a184a4c/tumblr_inline_mpq7oro2491qz4rgp.gif"> 
    </div> 
    </div> 

CSS:

#wow img { 
    position:relative; 
    top:0; 
    left:0; 
    z-index:1 /*bottom level*/ 
} 
.newImage { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:2; /*top level*/ 
    opacity:0; /*hidden in normal state*/ 
} 
#wow:hover > .newImage{ 
    opacity:1; /*visible in hover state*/ 
} 
0

试试这个 CSS

.txtOverlay{ 
     margin-top:105px; 
     margin-left: 320px; 
     width:560px; 
     opacity:0.9; 
     font-size:20px; 
     font-weight:700; 
     text-align:justify; 
     border: 1px solid #bbb8b8; 
     padding:5px; 
     background: url(image url) no-repeat; 
    } 
    .theText{ 
     opacity:0; 
     } 
    .txtOverlay:hover .theText 
    { 
     opacity:0.9; 
     color:#FFFFFF; 
     font-size:20px; 
    } 

HTML

<div class="txtOverlay"> 
    <div class="theText"> 
    <!--text here--> 
    </div> 
    </div>