Need to apply hover to 2nd div when hover over 1st div - html

Question

CSS:
#content-items .thumb-artist img {
width: 220px;
position: relative;
z-index: 10;
height: 147px;
}
#filter-artist {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 25px 0 25px 10px;
position: relative;
font-weight: bold;
color: #666666;
text-transform: uppercase;
float: left;
width: 100%;
line-height: 1.4em;
}
#filter-artist #s {
border: 0;
font-size: 10px;
color: #666666;
background: transparent;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
padding: 1px 0px;
width: 80%;
}
#content-items {
width: 960px;
margin: 0 auto;
color: #fff;
}
#filter-artist span {
float: left;
}
#filter-artist a {
color: #666666;
padding: 0 8px;
float: left;
}
.active-filter {
color: #fff!important;
}
#filter-artist #submit {
background-image: url(img/icons.png);
background-position: -84px 0px;
background-color: transparent;
border: 0;
height: 14px;
line-height: 0;
padding: 0;
width: 14px;
float:right;
}
#filter-artist > p {display:none;}
#filter-artist form {
float: left;
border-bottom: 1px solid #666666;
}
#filter-artist #submit:hover {
background-image: url(img/icons.png);
background-position: -84px -14px;
}
#content-items .artist {
width: 25%;
float: left;
padding: 0 1% 40px 1%;
line-height: 1em;
height: 270px;
height: 190px!important;
}
#content-items .thumb-artist {
position: relative;
}
.thumb-artist img:hover .social-content {
opacity:1;
}
#content-items .artist h3 {
font-size: 18px;
margin: 10px 0;
line-height: 1em;
color: #fff;
font-family: "futura-pt",sans-serif;
}
}
element.style {
display: none;
}
#load-items .social-content {
position: absolute;
top: 80%;
left: 0%;
z-index: 15;
width: 100%;
text-align: center;
opacity:0;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-out;
}
.social {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 1em;
display: inline-block;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
line-height: 11px;
margin-right: 4px;
}
.facebook {
position:relative;
background-image: url(img/icons.png);
background-position: -3px -1px;
width: 20px;
height: 20px;
padding: 5px;
z-index:15;
float:left;
}
.web {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
float:left;
}
.sat-color {
background-color: #ff0033;
padding: 5px;
}
.social-content a:hover {
color: #ff3333;
}
.twitter {
position:relative;
background-image: url(img/icons.png);
background-position: -45px -1px;
width: 20px;
height: 20px;
padding: 5px;
float:left;
}
#load-items .social-content:hover {
position: absolute;
top: 80%;
left: 0%;
z-index: 15;
width: 100%;
text-align: center;
opacity:1;
}
.sat-color:hover {
background-color: #ff3333;
color: #fff !important;
}
HTML:
<article id="content-items">
<div id="filter-artist">
<span>FILTER:</span>
ALLNEWESTALPHABETICAL</div>
<div id="load-items">
<div class="artist">
<div class="thumb-artist">
<img width="300" height="138" src="http://downunderlabelgroup.com/wp-content/uploads/2013/03/k_oconnor_lge-300x138.jpg" class="attachment-medium wp-post-image" alt="Kim O'Connor">
<span class="social-content">
OFFICIAL SITE
</span>
</div>
<h3 class="name-artist">Troye Sivan</h3>
</div></div></article>
At the moment the hover effect is only applied when the mouse is hovered onto the social content. I would like to apply it to the whole picture.
So if anyone hovers onto the image the social content is displayed.
Thanks alot.

Answer 1

There are 2 options, 1 make the hover on the div, 2 hover on the img
1st option (recommended):
#content-items .thumb-artist:hover .social-content {
opacity: 1;
}
2nd option (use + next selector):
#content-items .thumb-artist .wp-post-image:hover + .social-content {
opacity: 1;
}
DEMO: http://jsfiddle.net/7w8spct6/

Answer 2

Maybe a CSS rule like this could work
img.attachement-medium:hover + .social-content {
position: absolute;
top: 80%;
left: 0%;
z-index: 15;
width: 100%;
text-align: center;
opacity:1;
}
But a better way would be to actually take the <img> and <span> elements you want and put them inside a new <div> and then have a rule for the contents of the <div>
<div class="wrapper">
<img width="300" height="138" src="http://downunderlabelgroup.com/wp-content/uploads/2013/03/k_oconnor_lge-300x138.jpg" class="content attachment-medium wp-post-image" alt="Kim O'Connor">
<span class="social-content content">
OFFICIAL SITE
</span>
</div>
.wrapper:hover .content {
/*styles*/ }