Question: I'm trying to enlarge an image when hovering over it as well as showing a div with text while hovering over that image. The enlarging works, but showing the other div doesn't.

```
<div id="punt1">
    <div id="puntnaam1" class="puntnaam">Ieplaan</div>
    <img class="punt"src="ieplaan1.jpg">
</div>

```

For CSS I used:

```
.punt{
    height: 100px;
    width: 100px;
}

.puntnaam{
    display: none;
}

.punt:hover{
    transform: scale(3);
}

.punt:hover .puntnaam{
    display: block;
}

```

What am I doing wrong?

Answer: 
You can't select previous siblings or parent elements in the DOM with CSS. You can only select next siblings or child elements.

e.g., if you changed your code to this:

```
<div id="punt1">
    <img class="punt"src="ieplaan1.jpg">
    <div id="puntnaam1" class="puntnaam">Ieplaan</div>
</div>

```

Then your selector could look like this:

```
.punt:hover + .puntnaam{
    display: block;
}

```

Because now the `<div>` is the next sibling after `<img>`

See: [Is there a "previous sibling" CSS selector?](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector)
You cant do something like that

```
.punt:hover .puntnaam{
    display: block;
}

```

its not working that way in CSS cause puntnaam is already hidden,
You can use simple jQuery code to solve it

```
$(".punt").hover(function() {
$("#puntnaam1").show();
 });

```