CSS how to change opacity of container but not text?

Question

I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image

Answer 1

Since you're using a solid background color you can use rgba to only change the opacity of the background/borders and not affect the content inside. In your example:

div.textbox:hover {
    background-color: rgba(222,222,222,.5);
    border: 2px solid rgba(222,222,222,.5);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

For images you can accomplish a fade using :before and :after and fading the opacity of those elements:

a#imglink2 {
    width: 200px;
    height: 200px;
    float: left;
    position: relative;
}
a#imglink2 p
{
  position: relative;
  z-index:2;
}

a#imglink2:before
{
background-image: url('http://images2.layoutsparks.com/1/239061/welcome-orange-vintage-design.gif');
  width: 200px;
  height: 200px;
  position: absolute;
  top:0; left:0;
  content:'';
  z-index:1;
  opacity:1;
  transition: .3s opacity linear;
}
a#imglink2:after
{
    background-image: url('http://images.all-free-download.com/images/graphicmedium/vintage_christmas_background_32295.jpg');
    width: 200px;
    height: 200px;
    position: absolute;
    top:0; left:0;
    content:'';
    z-index:1;
    opacity:0;
    transition: .3s opacity linear;
}
a#imglink2:hover:before
{
    opacity:0;
}
a#imglink2:hover:after
{
    opacity:1;
}

http://codepen.io/seraphzz/pen/ikJqB