Anyone know how to prevent the "watch the stream" and "dice game" to move like that?
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTC-8">
<title>RLESSON85</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<h1 class="index">HOME</h1>
<h1 id="indextitle">RLEESON85</h1>
<h1 id="stream">WATCH THE STREAM</div>
<h1 id="dice">DICE GAME</h1>
</body>
</html>
CSS:
body {
background: #333;
}
footer {
}
.index {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
float: left;
margin-left: 30px;
background: transparent;
height: 60px;
width: 140px;
line-height: 60px;
text-align: center;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
#indextitle {
font-family: bebas neue;
font-size: 190px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 5px;
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
}
#dicetitle {
font-family: bebas neue;
font-size: 160px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 5px;
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
}
#stream {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
position: absolute;
top: 56%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
background: transparent;
height: 60px;
width: 320px;
line-height: 60px;
text-align: center;
border: 0;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
#dice {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
position: absolute;
top: 66%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
background: transparent;
height: 60px;
width: 200px;
line-height: 60px;
text-align: center;
border: 0;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
.index:hover {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
float: left;
margin-left: 40px;
background: #777;
height: 60px;
width: 120px;
line-height: 60px;
text-align: center;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
#stream:hover {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
position: absolute;
top: 56%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
background: #777;
height: 60px;
width: 300px;
line-height: 60px;
text-align: center;
border: 0;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
#dice:hover {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
position: absolute;
top: 66%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
background: #777;
height: 60px;
width: 180px;
line-height: 60px;
text-align: center;
border: 0;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
text-decoration: none;
color: white;
}
Don't position each element individually, but position the whole block.
Also, you shouldn't use <h1> for everything.
<head>
<meta charset="UTC-8">
<title>RLESSON85</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="index">HOME</div>
<div class="maingroup">
<h1 id="indextitle">RLEESON85</h1>
<div id="stream">WATCH THE STREAM</div>
<div id="dice">DICE GAME</div>
</div>
</body>
CSS
.maingroup {
position: absolute;
top: 50%;
height: 450px;
margin-top: -225px;
text-align: center;
}
#stream, #dice {
margin: 0 auto 20px;
}
See the JSFiddle
I just tried... just put the class you want to use inside the div like
<head>
<meta charset="UTC-8">
<title>RLESSON85</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div><h1 class="index">HOME</h1><div>
<div><h1 id="indextitle">RLEESON85</h1></form></div>
<div><h1 id="stream">WATCH THE STREAM</div>
<div><h1 id="dice">DICE GAME</h1><div>
</body>
try something like this....
HTML
<div id="outerwrapper">
<div id="innerwrapper">
<p class="links">Home</p>
<h1>RLEESSON85</h1>
<p class="links">Watch the Stream Dice game</p>
</div>
</div>
CSS
#outerwrapper {
background:url("http://www.freeppt.net/background/violet-vector-leaves-circles-backgrounds-for-powerpoint.jpg") no-repeat left top;
background-position:cover;
height: 100%;
position: absolute;
width: 100%;
}
#innerwrapper {
background-color:#333;
position:absolute;
width:100%;
height:100%;
transition: all 0.3s ease 0s;
}
.links a, links a:hover, links a:visited {
color:white;
text-decoration:none;
padding:10px 25px;
display:inline-block;
border-radius:7px;
border:1px solid white;
}
h1 {
font-size:80px;
color:white;
}
Script
$(".links a").click(function () {
$("#innerwrapper").css("height", "50%");
setTimeout(function () {
$("#innerwrapper").css("height", "100%");
}, 2000);
});
Fiddle Demo
Related
I'm in the process of playing with css a bit. Unfortunately, it doesn't look quite the way I'd like it to yet. The speech bubble should be smaller and directly above them. The other reason is the rotation when the mouse pointer goes over the speech bubble the complete speech bubble should rotate. Unfortunately, when you rotate it, everything else looks like a speech bubble....
How do I make the bubble smaller and put it over them and how do I make the rotation look better.
HTML
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
body {
padding: 50px;
font-family: 'Montserrat', sans-serif;
}
.spinner-text {
color: #fff;
}
.spinning {
color: #fff;
}
.spinning:hover {
width: 100px;
height: 100px;
color: #fff;
background-color: #5869FF;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* transform: rotate(3deg); */
/* transform: rotate(0.3rad);/ */
/* transform: rotate(3grad); */
/* transform: rotate(.03turn); */
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.bubble {
position: relative;
font-family: sans-serif;
font-size: 18px;
line-height: 24px;
width: 300px;
color: #fff;
background: #5869FF;
border-radius: 40px;
padding: 24px;
text-align: center;
color: #000;
}
.bubble-bottom-left:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 24px solid #5869FF;
border-right: 12px solid transparent;
border-top: 12px solid #5869FF;
border-bottom: 20px solid transparent;
left: 32px;
bottom: -24px;
}
.blue {
color: #5869FF;
}
.black {
color: #3B3B3B;
}
.text {
text-align: center;
display: flex;
margin-top: 35px;
}
<div>
<div class="spinning">
<div class="bubble bubble-bottom-left" contenteditable>
<div class="spinner-text">
:)
</div>
</div>
</div>
<div class="text">
<div class="blue">this</div>
<div class="black">is</div>
<div class="blue">name</div>
</div>
</div>
What I have
What I want
Try this, Instead of animation on .spinning div and animation on .spinner-text only
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
body {
padding: 50px;
font-family: 'Montserrat', sans-serif;
}
.spinner-text {
color: #fff;
}
.spinning {
margin-left: 30px;
}
.spinning:hover .bubble .spinner-text {
background-color: #5869FF;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* transform: rotate(3deg); */
/* transform: rotate(0.3rad);/ */
/* transform: rotate(3grad); */
/* transform: rotate(.03turn); */
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.bubble {
position: relative;
font-family: sans-serif;
font-size: 30px;
line-height: 28px;
width: 52px;
height: 52px;
color: #fff;
padding: 0;
text-align: center;
color: #000;
}
.bubble-bottom-left:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 14px solid #5869FF;
border-right: 12px solid transparent;
border-top: 12px solid #5869FF;
border-bottom: 20px solid transparent;
left: 15px;
bottom: -20px;
}
.bubble .spinner-text {
background: #5869FF;
border-radius: 40px;
padding: 12px;
border-radius: 40px;
}
.blue {
color: #5869FF;
}
.black {
color: #3B3B3B;
}
.text {
text-align: center;
display: flex;
margin-top: 20px;
font-weight: bold;
font-size: 20px;
}
<div>
<div class="spinning">
<div class="bubble bubble-bottom-left" contenteditable>
<div class="spinner-text">
:)
</div>
</div>
</div>
<div class="text">
<div class="blue">this</div>
<div class="black">is</div>
<div class="blue">name</div>
</div>
</div>
Here you have the solution which is coresponding with the screenshot of your requirements. I have modified Minals code to get a faster solution because he did really good job with fixing the rotate issue.
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
body {
padding: 50px;
font-family: 'Montserrat', sans-serif;
}
.spinner-text {
color: #fff;
font-size:20px;
font-weight:700;
width:40px;
}
.spinning {
margin-left: 115px;
}
.spinning:hover .bubble .spinner-text {
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.bubble .spinner-text {
background: transparent!important;
border-radius: 40px;
padding: 10px;
border-radius: 40px;
position:absolute;
left:-10px;
bottom:2px;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.bubble {
position: relative;
font-family: sans-serif;
font-size: 18px;
line-height: 24px;
width: 0px;
height:0px;
background: #5869FF;
border-radius: 40px;
padding: 21px;
text-align: center;
color: #000;
top:14px;
}
.bubble-bottom-left:before {
content: "";
width: 10px;
height: 15px;
position: absolute;
background-color: #5869ff;
left: 5px;
bottom: -8px;
border-radius: 0px 0px 100px 0px;
transform: translate(0, -5px);
}
.blue {
color: #5869FF;
font-size:25px;
font-weight:600;
}
.black {
color: #3B3B3B;
font-size:25px;
font-weight:600;
}
.text {
text-align: center;
display: flex;
margin-top: 20px;
font-weight: bold;
font-size: 20px;
}
<div>
<div class="spinning">
<div class="bubble bubble-bottom-left" contenteditable>
<div class="spinner-text">
:)
</div>
</div>
</div>
<div class="text">
<div class="blue">this</div>
<div class="black">is</div>
<div class="blue">name</div>
</div>
</div>
You need to set a transform origin by transform-origin: 0% 0% to rotate element in center or what point you want to transform.
See JSFiddle Sample
body {
padding: 50px;
font-family: "Montserrat", sans-serif;
}
.spinner-text {
color: #fff;
}
.spinning {
color: #fff;
position: absolute;
bottom: 28px;
left: 80px;
width: 40px;
height: 40px;
}
.spinning:hover {
cursor: default;
color: #fff;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#speechBubble {
display: block;
position: relative;
}
.bubble {
position: absolute;
font-family: sans-serif;
font-size: 18px;
line-height: 20px;
width: 20px;
height: 20px;
color: #fff;
background: #5869ff;
border-radius: 50%;
padding: 10px;
text-align: center;
}
.bubble-bottom-left:before {
content: "";
width: 6px;
height: 18px;
position: absolute;
background-color: #5869ff;
transform: rotate(35deg);
left: 15px;
bottom: -8px;
border-radius: 0px 0px 40px 0px;
}
.blue {
color: #5869ff;
}
.black {
color: #3b3b3b;
}
.text {
text-align: center;
display: flex;
margin-top: 35px;
font-weight: 600;
font-size: 20px;
}
/* EOS */
<div id="speechBubble">
<div class="spinning">
<div class="bubble bubble-bottom-left" contenteditable>
<div class="spinner-text">
:)
</div>
</div>
</div>
<div class="text">
<div class="blue">this</div>
<div class="black">is</div>
<div class="blue">name</div>
</div>
</div>
I'm trying to make these buttons a fixed size. Which is width 42px and height 25px. For some reason, they aren't the correct size. Just the standard one. I've looked for solutions but couldn't find one sadly. Sorry if my code is a bit messy, I'm a beginner and trying to make something work :)
Here is the HTML and CSS code
<!DOCTYPE html>
<html>
<head>
<title>Super epic game</title>
<link rel="stylesheet" type="text/css" href="mainstyles.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="https://fonts.googleapis.com/css?family=Lato:300&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=0.45">
</head>
<body>
<div class="container">
<div id="speelkader"> <canvas id="canvas" style="background-color: black;"></canvas></div>
<div id="attributen">
<button id="rood" class="color-changer" data-color="red">Rood</button>
<button id="groen" class="color-changer" data-color="green">Groen</button>
<button id="blauw" class="color-changer" data-color="blue">Blauw</button>
<button id="paars" class="color-changer" data-color="purple">Paars</button>
<button id="oranje" class="color-changer" data-color="orange">Oranje</button>
<button id="geel" class="color-changer" data-color="yellow">Geel</button>
<button id="wit" class="color-changer" data-color="white">Wit</button>
<button id="gum" class="color-changer" data-color="black">Gum</button>
<input type="button" id="reset" value="Reset tekening" onClick="window.location.reload()">
<div id="clear"></div>
</div>
</div>
<p id="center">Hallo! Gebruik de WASD toetsen om te bewegen :)</p>
<script src="gameJS.js"></script>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
}
.container{
width: 1359px;
margin: auto;
}
#speelkader{
margin-top: 20px;
background-color: transparent;
float: left;
padding-right: 10px;
}
#attributen{
margin-top: 20px;
background-color: gray;
width: 500px;
height: 800px;
float: left;
}
#clear {
clear: both;
}
canvas{
background-color: black;
height: 800px;
width: 800px;
}
#groen{
background-color: green;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#groen:hover{
background-color:darkgreen;
color: white;
transform: scale(1.15);
}
#rood{
background-color: red;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#rood:hover{
background-color:darkred;
color: white;
transform: scale(1.15);
}
#blauw{
background-color: blue;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#blauw:hover{
background-color:darkblue;
color: white;
transform: scale(1.15);
}
#paars{
background-color: purple;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#paars:hover{
background-color:rgb(92, 0, 92);
color: white;
transform: scale(1.15);
}
#oranje{
background-color: orange;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#oranje:hover{
background-color:darkorange;
color: white;
transform: scale(1.15);
}
#geel{
background-color: yellow;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#geel:hover{
background-color:rgb(233, 233, 0);
color: white;
transform: scale(1.15);
}
#wit{
background-color: white;
color: black;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#wit:hover{
background-color: whitesmoke;
color: black;
transform: scale(1.15);
}
#gum{
background-color: gray;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#gum:hover{
background-color: darkgray;
color: white;
transform: scale(1.15);
}
#reset{
background-color: darkred;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#reset:hover{
background-color: rgb(114, 0, 0);
color: white;
transform: scale(1.15);
}
You have used separated id in styles for width and height and removed it all used ID height and width. Use the below code and it will work equal height and width for the button.
#attributen button[class=color-changer],
#attributen input[id="reset"] {
width: 140px;
height: 35px;
}
Add button type attributes with all the buttons and set it to button, your problem will get solve.
type="button"
here is a simplified version of my webpage. I am experiencing an issue where my buttons ( tags) are overlapping my main h1 element. How can I fix this, so they do not overlap? I believe that the issue is being caused because I have set the position of the div #MOVE to fixed. However, I need this due to my animated navigation bar.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css">
<script src="jquery-1.10.2.min.js">
</script>
<script src="main.js">
</script>
<title>A'S COFFEE</title>
</head>
<body>
<div id="MOVE">
<h1 class="logoone">COFFEE.</h1>
<h1 class="logotwo">BETTER WITH A'S</h1>
</div>
<div class="centeralign">
<a class="button" href="place.html" id="btn1">Want to Place<br>
an Order?</a><br>
<a class="button" href="#" id="btn2">View Orders?</a>
</div>
<footer></footer>
</body>
</html>
CSS:
h1{
color: #e5b78e;
font-family: Arial;
font-size: 100pt;
padding: 0px;
margin: 0px;
display: block;
}
.logoone{
margin-left: 50px;
padding-top: 40px;
letter-spacing: 15px;
}
.logotwo{
margin-left: 50px;
margin-bottom: 70px;
letter-spacing: 15px;
}
body{
background: url("../img/image3.jpg") no-repeat center center fixed;
background-size: cover;
}
.button{
text-decoration: none;
padding: 30px;
background-color: white;
opacity: 0.5;
font-family: arial;
font-size: 25pt;
text-transform: uppercase;
font-weight: bolder;
color: #202530;
border-radius: 1px;
transition: opacity .2s ease-out;
margin-top: 10px;
letter-spacing: 4px;
}
.button a{
color: rgba(0,0,0,0.5);
}
#btn1{
margin-top:30px;
display: inline-block;
padding-left: 30px;
padding-right:30px;
}
#btn2{
margin-top:30px;
display: inline-block;
padding-left: 47px;
padding-right: 47px;
}
.button:hover{
opacity: 1;
transition: opacity .2s ease-in;
}
.centeralign{
text-align: center;
}
br{
padding: 40px;
}
/* NAV */
#MenuIcon{
height: 25px;
width: 50px;
position: fixed;
top:50;
right: 50;
}
#MenuIcon:hover{
cursor: pointer;
}
#MenuLine{
height: 4px;
width: 50px;
background-color: #e5b78e;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .3s;
}
#MenuIcon:hover #MenuLine{
width: 40px;
}
#MenuLine::before{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: 10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::before{
width: 50px;
}
#MenuLine::after{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: -10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::after{
width: 50px;
}
#MainMenu{
height: 100vh;
width: 300px;
background-color: #181818;
-webkit-clip-path:polygon(0 0,100% 0,0% 100%,0% 100%);
position: fixed;
top:0;
left: -300px;
transition: all .5s ease-in-out;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
font-weight: bold;
color:white;
text-align: center;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
}
ul li{
margin: 20px;
}
ul li:hover{
cursor: pointer;
}
.line{
height: 2px;
width: 150px;
background-color: white;
margin-top: 10px;
position: absolute;
left: 50%;
transform: translate(-50%);
transition: all .3s;
}
ul li:hover .line{
width: 180px;
}
#logo{
position: absolute;
top:100;
left: 50%;
transform: translate(-50%);
}
#close{
position: absolute;
bottom: 150;
left: 50%;
transform: translate(-50%);
}
#close:hover{
cursor: pointer;
}
.LOGO{
font-size: 4.5em;
}
#MOVE{
position:fixed;
top:0%;
left: 0px;
transition: all .5s ease-in-out;
width:85%;
height: 100%;
}
Try
#MOVE{
position:relative;
top:0%;
left: 0px;
transition: all .5s ease-in-out;
width:85%;
height: 100%;
}
That sets the position relative to other elements within the page
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>
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*/ }