basically all i want to do is: Have a picture and when someone hovers over it i want some text to appear in its position(in the middle to be exact). What I have done so far is make the picture disappear on hover but i cannot get the text to be appeared..

Html:

```
<div class="container">
<img id="atp "class="atp" src="atp.jpg">
    <div class="center">Some text</div>
</div>

```

Css:

```
atp{
display:block;
margin-left:auto;
margin-right:auto;
width:27%;
height:50%;}

container{
position: relative;
text-align: center;

```

}

```
.center{
position: absolute;
top:50%;
left:50%;
opacity: 0;

```

}

So basically, what i seek to be done is `.atp:hover{opacity:0;}` and what I also want is on atp's hover the `.center{opacity:1;]` So is there a way to put the opacity of center's to 1 when I am in the `atp:hover{}` code block?

Hope everything looks fine, thanks in advance!