Upon mouse over of one item hiding another

I'm currently working on a site where I'm using divs to position text over an image. What I would like to accomplish is that when the image is not moused over the visitor sees the image and the text positioned over it. When the image is moused over I would like the text to disappear. I tried this and it didn't work. Can something like this be done in CSS?

.wp-image-1943:hover {
opacity: .3;
.text-for-image (
display: none;

Syndicate content