I tried to add a background image to the span but, for some reason, it doesn't seem to be properly loading. The jsfiddle is below.
P.S-I know its kinda straight "it doesn't works question" just got stuck for a while couldn't find a answer
http://jsfiddle.net/whnb3yf2/46/
<div class="learn">
<a>Learn More</a>
<span></span>
</div>
.learn
{
width: 200px;
height: 60px;
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
position: relative;
text-align: center;
font-size: 18pt;
line-height:60px;
overflow: hidden;
}
.learn a
{
color: white;
display: block;
transition: all 0.2s ease-in-out;
}
.learn:hover {
background-color: white;
}
.learn:hover a
{
color: black;
margin-left: -20px;
}
.learn span
{
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center;
display: block;
width: 9px;
height: 16px;
position: absolute;
top: 22px;
left: 110%;
transition: all 0.2s ease-in-out;
}
.learn:hover span{
left: 80%;
}
body {
background-color: black;
}
You need to add background-size: 9px 16px; to your .learn span rule.
.learn {
width: 200px;
height: 60px;
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
position: relative;
text-align: center;
font-size: 18pt;
line-height:60px;
overflow: hidden;
}
.learn a {
color: white;
display: block;
transition: all 0.2s ease-in-out;
}
.learn:hover {
background-color: white;
}
.learn:hover a {
color: black;
margin-left: -20px;
}
.learn span {
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center center;
background-size: 9px 16px;
display: block;
width: 9px;
height: 16px;
position: absolute;
top: 22px;
left: 110%;
transition: all 0.2s ease-in-out;
}
.learn:hover span{
left: 80%;
}
body {
background-color: black;
}
<div class="learn">
<a>Learn More</a>
<span></span>
</div>
The issue you are having is that the background image for the button is too small. You can fix that by setting the background size equal to that of the button. For more information on the background-size attribute, check out http://www.w3schools.com/cssref/css3_pr_background-size.asp
.learn {
width: 200px;
height: 60px;
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
position: relative;
text-align: center;
font-size: 18pt;
line-height:60px;
overflow: hidden;
}
.learn a {
color: white;
display: block;
transition: all 0.2s ease-in-out;
}
.learn:hover {
background-color: white;
}
.learn:hover a {
color: black;
margin-left: -20px;
}
.learn span {
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center center;
background-size: 9px 15px;
display: block;
width: 9px;
height: 16px;
position: absolute;
top: 22px;
left: 110%;
transition: all 0.2s ease-in-out;
}
.learn:hover span{
left: 80%;
}
body {
background-color: black;
}
<div class="learn">
<a>Learn More</a>
<span></span>
</div>
Related
I provided my CSS and HTML down below. I am trying to finish off my dropdown, but there's an issue with it that makes the transition not so smooth. It's hard to explain with words on what it's doing.
I have tried changing the display, max-height, padding, and margin but there have been no results. Perhaps I need to add some JavaScript to it rather than CSS? Any suggestions or problems that can be pointed out will be great.
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #FFF;
margin-bottom: 210px;
border-radius: 5px;
}
#nav-container {
display: table;
margin: 10px auto;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
margin-top: -26px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
/* nav-dropdown */
#dropdown {
display: block;
position: absolute;
text-align: center;
width: 300px;
height: 50px;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
display: table-cell;
margin: 0;
cursor: pointer;
background-color: transparent;
text-align: center;
}
#extensions {
display: table;
border-collapse: separate;
border-spacing: 40px;
height: 50px;
width: 350px;
}
.label {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
text-align: center;
position: absolute;
width: 300px;
}
#dropdown-content {
position: absolute;
margin: 0 auto;
opacity: 0;
width: 300px;
height: 50px;
background-color: #C9C9C9;
border-radius: 8px;
box-shadow: 1px 1px 50px 0px white;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.nav-dropdown-container {width: 350px;height: 800px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown-content:hover {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
margin-top: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
#dropdown-content:hover p {
display: block;
text-decoration: none;
transition: 0.5s;
}
#dropdown-content p {display: none;}
#dropdown-link {color: white;}
#dropdown-link:link {
color: white;
text-decoration: none;
}
#dropdown-link:hover {
color: lightgrey;
}
<nav id="navigation">
<div id="nav-container">
<ul id="nav-items">
<li>
<div id="extensions">
<div class="nav-dropdown-container">
<div id="dropdown">
<p class="label">TEST</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="hello.html">HELLO</a></p>
<p><a id="dropdown-link" href="world.html">WORLD</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
As stated in the comments, the reason is because when the :hover state is triggered on #dropdown-content, the mouse cursor quickly enters and leaves the element causing the state to be quickly toggled on and off repeatedly, resulting in a janky transition.
The fastest fix is this: you should change your selectors so that you bind the :hover state to the nearest common ancestor of both the label AND the dropdown content, i.e. #dropdown.
So you should change this:
#dropdown-content:hover { ... }
#dropdown-content:hover p { ... }
...to this:
#dropdown:hover #dropdown-content { ... }
#dropdown:hover #dropdown-content p { ... }
This is of course a stop-gap solution since I find your markup unnecessarily bloated in order to achieve a simple dropdown effect.
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #FFF;
margin-bottom: 210px;
border-radius: 5px;
}
#nav-container {
display: table;
margin: 10px auto;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
margin-top: -26px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
/* nav-dropdown */
#dropdown {
display: block;
position: absolute;
text-align: center;
width: 300px;
height: 50px;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
display: table-cell;
margin: 0;
cursor: pointer;
background-color: transparent;
text-align: center;
}
#extensions {
display: table;
border-collapse: separate;
border-spacing: 40px;
height: 50px;
width: 350px;
}
.label {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
text-align: center;
position: absolute;
width: 300px;
}
#dropdown-content {
position: absolute;
margin: 0 auto;
opacity: 0;
width: 300px;
height: 50px;
background-color: #C9C9C9;
border-radius: 8px;
box-shadow: 1px 1px 50px 0px white;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.nav-dropdown-container {
width: 350px;
height: 800px;
}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown:hover #dropdown-content {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
margin-top: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
#dropdown:hover #dropdown-content p {
display: block;
text-decoration: none;
transition: 0.5s;
}
#dropdown-content p {
display: none;
}
#dropdown-link {
color: white;
}
#dropdown-link:link {
color: white;
text-decoration: none;
}
#dropdown-link:hover {
color: lightgrey;
}
<nav id="navigation">
<div id="nav-container">
<ul id="nav-items">
<li>
<div id="extensions">
<div class="nav-dropdown-container">
<div id="dropdown">
<p class="label">TEST</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="hello.html">HELLO</a></p>
<p><a id="dropdown-link" href="world.html">WORLD</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
I have set up a webshop with a product list. Each product is composed of an image, an add to cart button and a selector. For some reason the images are taken up a large part of the screen, more than the properties I have given them. This is my CSS:
* {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: normal;
text-decoration: none;
color: #e3e5e8;
}
body {
background: black;
max-height: 100%;
}
#Menu {
background-color: black;
color: white;
max-width: 100%;
text-align: center;
font-size: 30px;
position: relative;
top:50%;
word-spacing: 150px;
}
#Menu img{
position: relative;
right: 200px;
margin-left: 5px;
height: 200px;
width: 200px;
}
#Menu:link{
text-decoration: none;
margin: 50px;
}
#Home {
background-color: black;
height: 300px;
}
#Webshop {
background-color: black;
height: 100%;
width: 100%;
}
.Info {
max-width: 100%;
max-height: 20%;
padding: 40px;
margin: 0 auto;
position: fixed;
bottom: 0px;
}
hr {
border: 0;
margin: 20px 0;
}
#Productlist {
list-style-type: none;
position: relative;
display: inline-block;
margin-top: 100px;
height: 50px;
width: 50px;
}
#Product img {
width: 350px;
height: 400px;
display: inline-block;
position: relative;
left: 50px;
margin-top: 100px;
}
#Productlist:hover img {
opacity: 0.5;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#Product:hover img {
opacity: 1;
}
#Webshop button {
background-color: #141516;
position: relative;
right: 134px;
display: inline-block;
z-index: 1;
padding: 15px 45px;
line-height: 1.8;
text-align: center;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 600;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border: 3px solid white;
}
#Webshop button a {
position: relative;
padding: 0px;
text-align: center;
text-transform: uppercase;
color: #888888;
font-size: 0.8rem;
font-weight: 600;
line-height: 60px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#Webshop button:hover a {
color: red;
z-index: 1000;
}
#Webshop button:hover {
color: black;
background-color: white;
border: 1px solid white;
}
#size {
display: inline-block;
z-index: 1;
color: white;
position: relative;
right: 484px;
border: 3px solid white;
width: 120px;
height: 40px;
border-radius: 3px;
overflow: hidden;
background: #141516 no-repeat 90% 50%;
}
#size:focus {
outline: none;
}
I'm using React and this is how my component render looks like:
render() {
return (
<div className='Webshop' id='Webshop'>
<li id="Productlist">
<div className='Product'>
<img src={Seltzshirt}></img>
<button onClick={this.handleClick} className="addit">Add to cart</button>
<select id="size" onChange={this.change} value={this.state.value}>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-large</option>
</select>
</div>
<div className='Product'>
<img src={Seltzshirt}></img>
<button onClick={this.handleClick} className="addit">Add to cart</button>
<select id="size" onChange={this.change} value={this.state.value}>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-large</option>
</select>
</div>
</li>
</div>
);
}
Is this problem with my CSS? Could it be an issue on my side because I'm using Webpack Dev Server to preview my page?
You aren't using the correct css selectors in every case. In your css use # to target id and use . to target class or in jsx className.
E.g. Use .Product img instead of #Product img
You seem to exclusively try and target ids, but most of your selectors are classes.
I am trying to position a button 10px off the horizontal center of the screen. This is the button code. The button uses some fancy hovering effect, which doesn't move with the button. How can I put the button 10px off the horizontal center of the screen?
body {
background-color: green;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
I have made some changes in the css to class button-2.
.button-2 {
float: none;
margin: 0 auto;
top: 10px;
}
body {
background-color: green;
}
.button-2 {
border: 2px solid white;
box-sizing: border-box;
cursor: pointer;
float: none;
height: 50px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
top: 10px;
width: 140px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
You need to use this:
.top {
position: relative;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
Make sure you add the unique class top to the first <div> and use that to position. You can also use margin and padding on the .top.
body {
background-color: green;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.top {
position: relative;
padding-top: 25px;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
<div class="top watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
try centering its parent and shifting it within its parent:
body {
background-color: green;
text-align: center;
}
.outer {
width: 200px;
margin: auto;
background-color: blue;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position outer">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
try width 90% of div.button-2 and set border and padding to anchor.
body {
background-color: green;
}
.button-2 {
width: 90%;
height: 50px;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
border: 2px solid white;
padding:15px;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.top {
position: relative;
padding-top: 25px;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
<div class="top watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
I am able to display two span text elements over the image when I hover over with my cursor successfully. But I am having trouble placing a button that is centered over the image, below the project name. Any help would be appreciated. I should also note the button that I want to use is from a Bootstrap 3 class.
Here is a demo: https://jsfiddle.net/oo1xx006/3/
Here is an example of what I want to create: http://www.devonstank.com/
HTML:
<div class="latest_projects">
<!-- My latest projects -->
<h1>My latest projects</h1>
<br>
<ul class="projects-list">
<li>
<img src="img/mudmat-global-model.jpg" alt="DOF Mudmat Lowering" width="380px" height="380px"/>
<span class="text-content">
<span class="project-type"><i>Project Type</i></span>
<span class="project-name">Project Name</span>
<!-- <span>View project</span> -->
</span>
</li>
</ul>
<br>
View more projects
</div>
CSS:
body {
padding-top: 0;
font-family: 'PT Sans', sans-serif;
background-color: white;
}
h1 {
/* margin: 15px 0;*/
font-size: 1.9em;
font-weight: normal;
color: #000;
line-height: 120%;
text-align: center;
}
h2 {
font-size: 1.3em;
margin: -5px 0 0;
font-weight: normal;
color: #000;
text-align: center;
}
a {
text-decoration: none;
color: #000;
font-weight: bold;
}
a:hover {
text-decoration: none;
}
p {
line-height: 200%;
padding: 0 10% 0 10%;
font-size: 1.1em;
text-align: center;
}
.btn-default {
border-color: #000;
border-radius: 0;
border-width: 2px;
color: #000;
font-size: 1.5em;
}
.btn-default:hover {
color: #fff;
background-color: #000;
border-color: #000;
border-radius: 0;
border-width: 2px;
}
img {
max-width: 100%;
}
/************************************
HOME
************************************/
.latest_projects {
text-align: center;
max-width: 1200px;
margin: 0 auto;
}
.latest_projects p {
margin: 0;
color: transparent;
}
.fluid-container img {
height: 350px;
width: 350px;
margin-bottom: 20px;
vertical-align: middle;
}
/*******Project Images******/
ul.projects-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.projects-list li {
display: inline-block;
height: 380px;
position: relative;
width: 380px;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 380px;
left: 0;
position: absolute;
top: 0;
width: 380px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 380px;
left: 0;
position: absolute;
top: 0;
width: 380px;
opacity: 0;
}
ul.projects-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 380px;
left: 0;
position: absolute;
top: 0;
width: 380px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.project-type {
position: absolute;
text-align: center;
/*margin: 25px 0;*/
padding: 120px;
width: 380px;
vertical-align: middle;
font-size: 1.7em;
}
span.project-name {
font-size: 2.5em;
}
span.view-project {
position: absolute;
text-align: center;
/*margin: 25px 0;*/
padding: 10px;
width: 380px;
vertical-align: middle;
font-size: 1.7em;
}
You can do that with Javascript. Basically you have a container, inside which you need to see/use extra content if you hover on it. I suggest that you should add the needed html, but with display: none; CSS rule, and then you need to show it when the user hovers the container and hide it if the use leaves the container. This is how you can do it with jQuery:
$(".yourcontainerclass").mouseenter(function() {
$(this).find(".yourinnerclass").hide();
});
$(".yourcontainerclass").mouseout(function() {
$(this).find(".yourinnerclass").show();
});
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*/ }