Question

So I've been trying to recreate the hover disappear/re-appearing image effect found on oudolf.com with just CSS. I've gotten this far: https://jsfiddle.net/cj5781ug/ but I can't figure out how to style the z-index so that div.text remains above everything else so I can hover from one text to another without having to leave the entire image. Or, I was able to set it up so that other text (h3) will not be seen above the image but you won't be able to select other text until you leave the image. Seen here: https://jsfiddle.net/ogjh96rb/ I know Javascript will make my life a lot easier but I want to practice my CSS and try to do as much with CSS before I learn Javascript.

Answer 1

You didnt put the h3 in the text div change it so that <div class="text"></div> <h3>Chicago</h3> is <div class="text"> <h3>Chicago</h3> </div> https://jsfiddle.net/9c9ye9sk/ I changed it just for chicago to show you Also put all of the city names in the same z index because not all of the names are above the images for some.

Answer 2

如果你想知道该网站是如何做到的，请点击这里：

z指数没有改变......不透明度是。最初，文本和图像是可见的，但不透明度是0.您看到的文本实际上是一个下面的svg，相同的图像和文本被淘汰。当您将鼠标悬停在包含这三项内容的DIV（text，img，svg）上时，文本和图像不透明度将设置为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-->

Answer 3

就在这里。 （示例和无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).

CSS hovering with images, text, and z-index

3 个答案: