I'm trying to make a text appear on image hover, but will need it to slide in from top and cover only 50% of image height, but not sure how can I get this to work, here is the code
<img style="background-color:#3b283e; float:left;" src="images/f1.jpg" />
<div class="cags1">Traditional Pastry</div>
and the CSS
.cags1{
background-color: #3b283e;
float:left;
}
.cags1:hover > img {
opacity:0.5;
padding: 10px;
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
color: #ffffff;
text-shadow: 0 1px 3px #000000;
}
Here is a working example based on your code:
.img-container {
position: relative;
overflow: hidden;
display: inline-block;
}
.img-container img {
background-color:#3b283e;
float:left
}
.cags1 {
background-color: #3b283e;
position: absolute;
top: -20px;
transition: 0.5s;
}
.img-container:hover > img {
opacity:0.5;
padding: 10px;
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
color: #ffffff;
text-shadow: 0 1px 3px #000000;
}
.img-container:hover .cags1 {
top: 20px;
}
<div class="img-container">
<img src="https://dummyimage.com/150x75/992c99/313abd" />
<div class="cags1">Traditional Pastry</div>
</div>
Related
I can't get an element to go where I want it to. I am only having this problem because of the way I did my header. I applied position: absolute. You can see an example here: http://jacobgasser.com and you can find all the code on there, or you can read down a little farther and I put it there.
I want the text in the top left of the page to be on the white part of the page
Here is the index.html
<body onload="loadUp();">
<div class="menu">
<a href="https://github.com/jacobgasser" target="_blank"><div
class="menuItem">Projects</div></a>
</div>
<div class="titleBG">
<h1 class="title" onmouseover="coolThing();"onmouseout="notCoolThing();">Jacob Gasser</h1>
</div>
<div class="article">
<div class="articleHead">Who am I?</div>
</div>
<script src="scripts/main.js"></script>
</body>
Here is main.css
body {
margin:0;
padding:0;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
}
a {
text-decoration: none;
color: inherit;
}
.article {
font-family: "Arial";
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
text-align: center;
position: relative;
}
.articleHead {
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
}
.menu {
display: block;
color: white;
float: right;
margin-right: 10px;
margin-top: 5px;
opacity: 0;
}
.menuItem {
font-size: 400%;
display: block;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: 0.2s;
border-radius: 5px;
}
.menuItem:hover {
background-color: white;
color: black;
cursor: pointer;
-webkit-transition: 0.2s;
}
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
position: fixed;
top: 0;
}
::selection {
color: #23272A;
background-color: white;
}
::-moz-selection {
color: #23272A;
background-color: white;
}
#font-face {
font-family: lemon;
src: url("fonts/LemonMilk.otf");
}
#font-face {
font-family: cavs;
src: url("fonts/CaviarDreams.ttf");
}
A simple solution to this issue is to remove the position: fixed; top: 0; and adjust the margin-top and margin-bottom of the page. Just change the CSS for .titleBG and .title to be the following:
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
margin: 0 /* You can add a margin-left or margin-right if you want, or even margin-bottom, just keep the margin-top at 0*/;
}
This will give you the following result:
I have two type's of buttons on the page I am creating:
Actual buttons <button>
Buttons created from <input type="submit">
I am trying to create button's, which on hover, perform like this:
.actions {
display:inline-block;
position:relative;
}
.hs-button {
background-color: #fff336;
}
.hs-button {
padding: 15px 20px 15px 20px;
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
border: 3px solid transparent;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.actions:hover input[type="submit"] {
border: 3px solid #000;
color: #fff336;
background:transparent;
}
.actions:before {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index:0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.actions:hover::before {
height:100%;
}
<div class="hs_submit">
<div class="actions">
<input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
</div>
</div>
As you can see, on hover, the black panel come's from bottom to top. I have managed to achieve this for <input type="submit"> buttons, but I can't seem to emulate the same aesthetics for <button>:
.cta-wrapper .cta-text p button{
border: 3px solid #fff336;
}
.thank-you .cta-wrapper {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: relative;
transition:all 0.3s;
}
.cta-text {
background-color: #ba1974;
padding:30px 30px 45px;
}
.cta-text {
background-color: #474747;
}
.cta-wrapper .cta-link {
position:absolute;
display:block;
height:100%;
width:100%;
top:0;
left:0;
}
.cta-text p {
font-size:16px;
line-height:24px;
font-weight:normal;
font-family: 'Raleway', sans-serif;
margin:0 auto 30px;
color:#fff;
}
.cta-text p:last-child {
margin-bottom:0;
}
.cta-text button {
-webkit-appearance: none;
width: 179px;
max-width: 100%;
border: 2px solid #fff336;
color: #000;
background-color: #fff336;
font-size: 16px;
font-family: 'Calibri W01 Regular_904604';
font-weight:400;
line-height: 1em;
padding: 11px 0 12px;
box-sizing: border-box;
cursor: pointer;
transition:all 0.25s;
}
.cta-wrapper:hover .cta-text button {
background-color: #000;
color:#fff336;
border: 3px solid #000;
}
.cta-wrapper:hover .cta-text button p {
color:#fff336;
}
p.button:first-of-type a:hover {
text-decoration: none;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
<div class="cta-wrapper">
<div class="cta-image">
</div>
<div class="cta-text">
<p><button>Download</button></p>
</div>
<a class="cta-link" href="#"></a>
</div>
Why isn't <button> performing like <input>?
For the <input> button, when you hover over the button, the background goes transparent for a second and then fills in with black. I want the background to remain yellow and the black to fill it on hover. How can I achieve this? The only way I can get the hover to work right now is to set the background as transparent - and input doesn't support and :after so I don't know how to work around this?
Well, here it is, I don't see your problem ...
.actions {
display:inline-block;
position:relative;
}
.hs-button {
background-color: #fff336;
}
.hs-button {
padding: 15px 20px 15px 20px;
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
border: 3px solid transparent;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.actions:hover button {
border: 3px solid #000;
color: #fff336;
background:transparent;
}
.actions:before {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index:0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.actions:hover::before {
height:100%;
}
<div class="hs_submit">
<div class="actions">
<button class="hs-button primary large">DOWNLOAD NOW</button>
</div>
</div>
.cta-wrapper{
background-color: #fff336;
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.cta-text{
display:inline-block;
position:relative;
}
.cta-text button {
-webkit-appearance: none;
width: 179px;
max-width: 100%;
border: 2px solid #fff336;
color: #000;
background-color: #fff336;
font-size: 16px;
font-family: 'Calibri W01 Regular_904604';
font-weight:400;
line-height: 1em;
padding: 11px 0 12px;
box-sizing: border-box;
cursor: pointer;
transition:all 0.25s;
}
.cta-text:hover button {
border: 3px solid #000;
color: white;
background:transparent;
}
.cta-text:before {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.cta-text:hover::before {
height:100%;
}
span{
font-family: 'Raleway', sans-serif;
}
<div class="cta-wrapper">
<div class="cta-image">
</div>
<div class="cta-text">
<button><span>Download</span></button>
</div>
<a class="cta-link" href="#"></a>
</div>
I'm trying to create a hover effect that will change the color of the image to blue, as the mouse hovers it. I've already created a class for the images and styled it in my css but its still not working. I've also tried changing z-indexes but to no avail.
#import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
*
{
margin: 0;
border: 0;
padding: 0;
}
body
{
background-image: url('../Images/background.png');
background-repeat: repeat-x;
}
.clearfix
{
clear:both;
}
#wrapper
{
margin: 0 auto;
max-width: 1120px;
overflow: auto;
border: 1px solid black;
}
#main_header
{
width: 100%;
font-family: 'Black Ops One', sans-serif;
background-color: black;
border: 1px solid black;
color: white;
}
#main_header h1
{
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout
{
margin: 50px 20px 0 0;
}
#callout h2{
text-align: right;
color: white;
}
#callout p{
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu
{
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li
{
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a
{
text-decoration: none;
color: black;
}
#nav_menu li a:hover
{
color: grey;
}
#content_area
{
width: 100%;
margin: 10px;
}
.sub-menu
{
position: absolute;
background-color: white;
list-style-type: none;
width: 5px;
display: none;
z-index: 60;
border-radius: 15px;
}
#nav_menu .sub-menu li a
{
color: black;
}
#nav_menu li:hover .sub-menu
{
display: block;
}
#nav_menu li .sub-menu
{
width: 16.5%;
}
#nav_menu li .sub-menu li
{
display: block;
margin-left: 20px;
}
.sub-menu li:hover
{
color: green;
background-color: yellow;
}
/*--- Start Image Slider --*/
.slider{
max-width: 1100px;
box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.07);
}
.slider1 img{
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a{
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
}
.slider .bx-wrapper .bx-prev{
background: url("../Images/arrow_left.png") no-repeat 7px 9px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover{
background: url("../Images/arrow_left.png") no-repeat 8px 15px;
}
.slider .bx-wrapper .bx-next{
background: url("../Images/arrow_right.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover{
background: url("../Images/arrow_right.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third img{
text-align: center;
max-width: 100%;
height: auto;
opacity: 0.9;
}
.border_section p{
font-family: 'Lato', sans-serif;
padding: 2%;
color: white;
text-align: justify;
}
.border_section h3
{
font-family: 'Open Sans', sans-serif;
text-align: center;
color: white;
text-transform: uppercase;
letter-spacing: 1%;
}
.border_section
{
border: 1px solid black;
background-color: black;
}
.one-third {
width: 27.35%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
background-color: white;
}
.guitarLogo img:hover
{
color: yellow;
background-color: blue;
}
footer{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: black;
overflow: auto;
}
footer p
{
margin-top: 1%;
color: white;
}
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/ibanezLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/gibsonLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/prsLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/ernieballLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/espLogo.jpg" runat="server"/>
</div>
</section>
If you don't want to affect other elements and change the background color of div element around your images, then create new class like myHover and add existing CSS to it, like:
HTML:
<div class="border_section myHover">
<img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server" />
</div>
CSS:
.myHover:hover {
color: yellow;
background-color: blue;
}
JSFiddle example: https://jsfiddle.net/59drat5e/4/
The selector would be img.guitarLogo:hover
But setting a background-color for an image will only affect the visible part around the image (if there is ANY), and color would only affect text (and there isn't any), so you will problably see no effect, even if it works.
It looks like that you are targeting the wrong element. The background-color:blue will only be visible if the image is transparent, otherwise most of the time the image will just overlap any background color for it to be visible.
What you should be doing is targetting the container element as shown below.
.border_section:hover
{
color: yellow;
background-color: blue;
}
DEMO
If you have images with transparencies or still if you want to set the background-color of the img just for the sake of it, then maybe you should write the rule as below.
img.guitarLogo:hover
{
color: yellow;
background-color: blue;
}
Try this code in your css
.guitarLogo:hover {
background: blue;
}
you can also overlay background color to image
.overlay {
position:relative;
width:400px;
height:auto;
}
.overlay img {
width:100%;
vertical-align:top;
}
.overlay:after {
content:'';
position:absolute;
width:100%;
height:100%;
top:0; left:0;
background:red;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.overlay:hover:after {
opacity:1;
}
<div class="overlay">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
</div>
Your CSS:
.guitarLogo img:hover {
color: yellow;
background-color: blue;
}
Is incorrect, because the .guitarLogo already targets the <img> element - no need for img:hover.
Also, that isn't going to work, because there is no way you can set z-index to background only - it's possible only for elements.
The way to do what you want is to register :hover on parent container and in it by using pseudo element :before / :after as the foreground you can get the desired effect.
My image is inside a well which has fixed width fixed.
(1) How to get my image always horizontally centered (I tried using
margin:0 auto but it didnt work).
(2) Also I have an .overlay
and it works for all my other images (which have the
max-width:300px, but for images as in example with smaller width,
I need the overlay to also cover a full max-width of the well (now as in this example, the overlay is limited to the width of these smaller-width images). How to make
these 2 things possible?
.image-video-linkcar {
position: relative;
display: inline-block;
}
.image-video-linkcar img {
max-width: auto;
max-height: 230px;
margin: 0;
padding: 0;
vertical-align: middle;
}
.categorycar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat',sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #FFF;
opacity: .9;
position: absolute;
opacity: .7;
bottom: 0;
right: 0;
min-height: 0;
}
.brandcar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat',sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #fff;
opacity: .9;
position: absolute;
opacity: .7;
top: 0;
right: 0;
min-height: 0;
}
.image-video-linkcar:hover .overlay {
opacity: 1;
}
.well.carousel {
width: 100%;
height: auto;
height: 420px;
width: 400px;
padding: 0;
margin: 0;
border: none;
background-color:red
}
.product-detailscar .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #F7F7F7;
color: #FFF;
padding: 10px;
border-top: 1px solid #A10000;
border-bottom: 1px solid #A10000;
/*vertical-align: middle;*/
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
/*padding: 25px;
text-align: center;*/
}
<div class="well carousel">
<div class="product-detailscar">
<div class="image-video-linkcar">
<img alt="#" src=
"http://lorempixel.com/100/200">
<div class="brandcar">
BRAND
</div>
<div class="categorycar">
CATEGORY
</div>
<div class="overlay">
<div class="subcategorycar">
SUBCAT
</div>
<div class="idcar">
ID
</div>
You need to move the overlay out of the .product-detailscar div.
.well {
width: 300px;
background: orange;
position: relative;
text-align: center;
}
.image-video-linkcar {
position: relative;
display: inline-block;
}
.image-video-linkcar img {
max-width: auto;
max-height: 230px;
margin: 0;
padding: 0;
vertical-align: middle;
}
.categorycar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #FFF;
opacity: .9;
position: absolute;
opacity: .7;
bottom: 0;
right: 0;
min-height: 0;
}
.brandcar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #fff;
opacity: .9;
position: absolute;
opacity: .7;
top: 0;
right: 0;
min-height: 0;
}
.well:hover .overlay {
opacity: 1;
}
.well .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: rgba(0, 255, 0, .5);
color: #FFF;
padding: 10px;
border-top: 1px solid #A10000;
border-bottom: 1px solid #A10000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="well carousel">
<div class="product-detailscar">
<div class="image-video-linkcar">
<img alt="#" src="http://www.fillmurray.com/100/200">
<div class="brandcar">
BRAND
</div>
<div class="categorycar">
CATEGORY
</div>
</div>
</div>
<div class="overlay">
<div class="subcategorycar">
SUBBBBBBCATEGORY
</div>
<div class="idcar">
IDDDDCAR
</div>
</div>
</div>
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.
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/
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*/ }