CODEWITHSUNDEEP
htmlcss
fanih
fanih

Reputation: 43

CSS hovering with images, text, and z-index

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.

Upvotes: 4

Views: 1532

Answers (3)

Chase Rocker
Chase Rocker

Reputation: 1908

If you want to know how that website is doing it, here it is:

The z-indexes aren't changing...the opacities are. Initially, the text and image are visible but the opacities are 0. The text you see is really an svg underneath with the same image and text knocked out. When you hover over the DIV containing those three things (text, img, svg), the text and image opacities are set to 1.

Here is a working example of that concept using part of your example markup. The key piece to making the svg text align with the real text is the text x and y positioning. Example: <text x="168" y="217" id="knockout" fill="white">Chicago</text> I estimated it, you'll want to make it accurate.

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-->

Upvotes: 0

Kyle L.
Kyle L.

Reputation: 634

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.

Upvotes: 2

Lieutenant Dan
Lieutenant Dan

Reputation: 8284

It's right here. (sample & no 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).

Upvotes: -1

Related Questions