CSS懸停圖片，文字和Z索引

所以我一直試圖重新創建懸停消失/重新出現的圖像效果oudolf.com上找到只有CSS。CSS懸停圖片，文字和Z索引

我已經得到了這個地步：https://jsfiddle.net/cj5781ug/但我無法弄清楚如何風格的z索引，使div.text仍然高於一切，所以我可以從一個文本到另一個懸停，而無需離開整個圖像。

或者，我可以進行設置，以便其他文字（h3）不會在圖像上方看到，但在您離開圖像之前您將無法選擇其他文字。看到這裏：https://jsfiddle.net/ogjh96rb/

我知道Javascript會讓我的生活變得輕鬆很多，但我想練習我的CSS，並嘗試在學習Javascript之前儘可能多地使用CSS。

來源

2015-06-25 fanih

我不明白你想要在這裏實現什麼樣的影響。我看着oudolf.com，我找不到任何圖像在懸停時消失/重現。你能否添加一些（鏈接到）圖像？ – jaunt

如果你想像你所指的網站那樣做，它們會改變不透明度，而不是z-index ......你可以在下面看到我的答案。 –

如果你想知道網站是怎麼做的，那就是：

的z索引沒有改變......不透明度是。最初，文本和圖像是可見的，但不透明度爲0.您看到的文本實際上是在下面的svg，同一圖像和文本被敲除。當你將鼠標懸停在包含這三樣東西（文字，IMG，SVG）的DIV，文本和圖像的不透明度設置爲1

下面是使用例如標記的一部分這一概念的工作示例。使svg文本與真實文本對齊的關鍵是文本x和y的定位。例如：<text x="168" y="217" id="knockout" fill="white">Chicago</text>我估計它，你會想使它準確。

https://jsfiddle.net/jbmy9s9m/4/

<div class="container"> 

<div class="words" id="p1"> 
    <h3>Chicago</h3> 
    <img class="hover-pics" src="http://i.imgur.com/XV7wrRI.jpg" width="600" height="402" alt="picture 1"/> 
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" class="svgMask1" width="600" height="402" viewBox="0 0 600 402"><defs><mask id="maskID0"><text x="168" y="217" id="knockout" fill="white">Chicago</text></mask></defs><title>Chicago</title><desc>Chicago</desc> 
<image style="mask:url(#maskID0);" width="600" height="402" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/XV7wrRI.jpg"></image></svg> 
</div> 

<div class="words" id="p2"> 
    <h3>Cambridge</h3> 
    <img class="hover-pics" src="http://i.imgur.com/R1zVKKL.jpg" width="600" height="400" alt="picture 2"/> 
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" class="svgMask2" width="600" height="400" viewBox="0 0 600 400"><defs><mask id="maskID0"><text x="125" y="225" id="knockout" fill="white">Cambridge</text></mask></defs><title>Chicago</title><desc>Chicago</desc> 
<image style="mask:url(#maskID0);" width="600" height="400" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/R1zVKKL.jpg"></image></svg> 

</div> 

</div><!--END OF CONTAINER-->

來源

2015-06-25 20:32:53

Omg這是驚人的！我知道不透明是爲了給文本「剪切圖像」效果，但我沒有進一步調查，看看它是否在影響圖像的其餘部分發揮作用。非常感謝！這太酷了：D – fanih

你沒有把H3在文本DIV

改變它，這樣

<div class="text"></div> 
<h3>Chicago</h3>

是

<div class="text"> 
    <h3>Chicago</h3> 
</div>

https://jsfiddle.net/9c9ye9sk/我改變它只是芝加哥向您展示

也把所有的城市名稱放在同一個z索引中，因爲不是所有的名字都是a爲某些人拍照。

來源

2015-06-25 19:03:55

-1

就是這裏。 （樣品&沒有JS）

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div {position: absolute;} 

#container div { 
    background-color: lightblue; 
    border: 1px solid #333333; 
    width: 100px; 
    height: 100px; 
    opacity: 0.5; 
} 

div#myBox { 
    opacity: 1; 
    background-color: coral; 
    z-index: 1; 
    -webkit-animation: mymove 5s infinite linear; /* Chrome, Safari, Opera */ 
    animation: mymove 5s infinite linear; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove { 
    50% {z-index: 5;} 
} 

/* Standard syntax */ 
@keyframes mymove { 
    50% {z-index: 5;} 
} 
</style> 
</head> 
<body style="position:absolute"> 

<p>The z-index property is <em>animatable</em> in CSS.</p> 
<p><strong>Note:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p> 

<p>Gradually change the z-index property of "myBox" from 1, to 5, and back to 1:<p> 
<div id="container"> 
    <div id="myBox">myBox</div> 
    <div style="top:20px;left:20px;z-index:1;">z-index 1</div> 
    <div style="top:40px;left:40px;z-index:2;">z-index 2</div> 
    <div style="top:60px;left:60px;z-index:3;">z-index 3</div>     
    <div style="top:80px;left:80px;z-index:4;">z-index 4</div>       
</div> 

</body> 
</html>

Live Demo/Source (via W3C).

來源

2015-06-25 20:34:50

CSS懸停圖片，文字和Z索引

回答

相關問題