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:
Related
This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
Closed 1 year ago.
Here is the CSS and HTML code, the problem is told below.
* {
box-sizing: border-box;
font-family: Georgia, 'Times New Roman', Times, serif;
}
body {
margin: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.topnav {
overflow: hidden;
background-color: #F5CB5C;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
.topnav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
.topnav a {
color: #242423;
text-align: center;
text-decoration: none;
}
.topnav li:hover {
background-color: #E8EDDF;
color: black;
}
.topnav li:active {
background-color: #E8EDDF;
color: black;
}
/* ITEM ABOVE DOES NOT WORK, FIX ASAP! */
.content {
background-color: #242423;
padding: 10px;
color: #E8EDDF;
}
.footer {
background-color: #F5CB5C;
padding: 10px;
color: #242423;
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 20em;
border-radius: 10px;
border-color: #FFFFFF;
max-width: 100%;
height: auto;
object-fit: cover;
margin: 1em;
}
.card-button {
background-color: #ddd;
position: relative;
border: none;
color: black;
padding: .5em 1em;
text-align: center;
text-decoration: none;
float: right;
left: .5em;
bottom: .5em;
cursor: pointer;
border-radius: 16px;
font-size: 16px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
.card img {
border-radius: 10px 10px 0 0;
}
.text-center {
text-align: center;
}
.center {
right: 50%;
}
.title {
margin-top: 2em;
text-align: center;
}
.grid-gallery {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.spacer {
width: 100%;
height: 2em;
}
and here is HTML,
<div class="card">
<img src="https://d3vjn2zm46gms2.cloudfront.net/blogs/2016/05/27005442/Roman-cup_w1280px_h720px.png" alt="Silver Cup" style="width:100%">
<div class="container">
<h4><b>Roman Silver Cup</b></h4>
<button class="card-button">Buy Now</button>
<p>$89.99</p>
</div>
</div>
and here is the problem the buttons are showing over the fixed navigation bar. Can anyone explain why?
I would look into the CSS z-index property, which allows you to specify that some item (such as the top nav bar) should always be above other items (or that other items should be below the top nav bar).
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I think you're searching for z-index.
It allows you to set the z-order of a positioned element (meaning that you need to provide a position to your element otherwise it won't work).
You can find more information here.
So in your case, you should add something like z-index: 999;.
This is happening because your button has position: relative; property. Use z-index property. Add z-index: 1000; to your class .topnav. So that navbar stays at top of all.
.topnav {
// other
z-index: 1000;
}
Or add z-index: -1; to your .card-button class.
.card-button {
// other
z-index: -1;
}
For some reason the background color refuses to change from white. I am trying to get it to change from white to black under the header, but it refuses to change. Putting "background-color:" in the body SCSS doesn't seem to change it.
I am not sure if there is something in my SCSS that is simply over riding the background color without me realizing?
Any help is greatly appreciated
SCSS:
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
background-color: '#010101';
}
#wrapperHeader {
width: 100vw;
height: 210px; /* height of the background image? */
background:url(images/header.png);
}
div#wrapperHeader div#header {
width: 100vw;
height:100px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width: 100vw ; /* the width of the logo image */
height: 210px ; /* the height of the logo image */
margin:0 auto;
}
header {
color: white;
background-color: dimgrey ;
clear: left;
text-align: center;
}
.toggle_menu{
position: fixed;
padding: 17px 20px 15px 15px;
margin-top: 210px;
color: white;
cursor: pointer;
background-color: #000;
z-index: 1000000;
font-size: 2em;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 100vh;
max-width: 250px;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17, 17, 17, 0.9);
opacity: 0,9;
transition: all 0.3s ease-in-out;
}
.fa-times{
right: 10px;
top: 10px;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: red;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1 ;
}
.boxed_item {
font-family: 'Open Sans';
font-weight: 200;
padding: 10px 20px;
display: inline-block;
border: solid 2px white;
box-sizing: border-box;
font-size: 22px;
color: white;
text-align: center;
margin-top: 70px;
}
.logo_bold{
font-weight: 800;
}
.logo_title{
color: white;
font-family: 'Open Sans';
font-weight: 200;
font-size: 12px;
text-align: center;
padding: 5px 0px;
}
.nav_selection{
margin: 0, 0;
display: block;
width: 200;
margin-top: 100px;
margin-left: 5px;
}
.nav_item{
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s ease-in-out;
}
.hide_menu{
margin-left: -250px;
}
.opacity_one{
opacity: 1;
}
.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6;
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s ease-in-out;
}
At three place you have give the background color code in three different style.
Please follow anyone format.
Never give the color in the quotation mark. You have given it in *{ background-color: '#010101'; } remember that. It should be *{ background-color: #010101; }.
You have given background-color: dimgrey ; so each time the color name is not working you have gave the color code for that.
This is header part for which you have to make change. for dimgrey the color code is: #696969 so your code will be:
header {
color: white;
background-color: #696969; // check this line.
clear: left;
text-align: center;
}
It will make the change in the header parts background color. you have to check only that part.
It may be possible that other style will be override the background of header. In that case you have to put the !important in the code like this:
header {
color: white;
background-color: #696969 !important; // check this line.
clear: left;
text-align: center;
}
Let me know if it help you.
Change background-color: '#010101'; this to
background-color: '#010101!important';
So I'm developing my first ever page after I've studied for about 3-4 months about HTML and CSS.
The problem is that the footer is sticked to the slideshow. Can't really seem to figure out how to stick it to the bottom of the page.
Also, if you find any other errors or you have any other tips for me, please mention them.
index.html
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>x</title>
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="shadow">
<header id="top">
<nav id="top-mic">
<ul>
<li>Contact</li>
<li>Despre noi</li>
<li>Locatie</li>
</ul>
</nav>
<img src="img/logo.jpg" alt="davnic" id="logo" width="288" height="115"></img>
<div id="top-mare-wrap">
<nav id="top-mare">
<ul>
<li>Acasa</li>
<li>Buton1</li>
<li>Buton2</li>
<li>Buton3</li>
<li>Buton4</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="js/sshow.js"></script>
<footer class="site-footer">
x
<img src="img/location_1.png" />
</footer>
</div>
</body>
</html>
sshow.css
.mySlides {
display: none;
}
.slideshow-container {
clear: both;
max-width: 100%;
position: relative;
margin: auto;
overflow: hidden;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
css.css
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: 4000px;
width: 100%;
padding-bottom: 6rem;
margin: 0;
font-size: 1.1em;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 14px;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 8px 30px;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6em;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 55px;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
float: left;
margin-left: 240px;
margin-right: 130px;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom:60px;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display:inline;
}
#top-mare li a {
margin-top: 42px;
margin-left: 40px;
padding-right: 20px;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1em;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
#container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
#container:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
.footer {
clear: both;
margin-top: 4000px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #F28A00;
text-align: center;
}
I've observed that if i delete position:relative from the sshow.css, it works, but the buttons from the slideshow obviously disappear.
Also tried with this css:
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: 4000px;
width: 100%;
padding-bottom: 6rem;
margin: 0;
font-size: 1.1em;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 14px;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 8px 30px;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6em;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 55px;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
float: left;
margin-left: 240px;
margin-right: 130px;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom:60px;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display:inline;
}
#top-mare li a {
margin-top: 42px;
margin-left: 40px;
padding-right: 20px;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1em;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
.footer {
clear:both;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Thanks a lot.
try closing div before the footer. the footer is inside the slide show, but i did'nt tested the code.
Try this:
CSS:
.footer {
border-style: groove;
border-width: 0px;
border-top-width: 1px;
border-top-color: white;
background-color: black;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 25px;
}
It will always have this footer at the bottom, black background and small width above. Height is 25px. You can style this footer in the CSS. Also note that the position is fixed.
EDIT:
I didnt test your code, make sure div's are closed properly.
Use position: fixed for the footer element.
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*/ }