Develop Reference

Event listener not firing for some reason

I've adapted the code from Simply-Nav (great lightweight mobile nav – thanks obscuredetour) so that the background semi-transparent overlay fades in as opposed to sliding in with the nav.
Got that working fine, but what I've lost now is the ability to click/tap the semi-transparent overlay (on the right hand side) to close the whole nav.
The event listener is still there – pageOverlay.addEventListener('click', toggleNav); – but it's not firing pageOverlay.classList.remove('-open');.
The overlay div is no longer a child of the parent <ul class="nav-list">, so I don't know if that has something to do with it.
I've tried creating a transparent overlay over the overlay div, and add an eventlistener to that, but that hasn't worked.
Here's the code, if anyone has any ideas, I'd be really grateful for any help. I'm still a novice, so no doubt it's something obvious. Thanks so much.
/*
simply-nav.js - v1.2.1
https://github.com/obscuredetour/simply-nav
Licensed MIT © Jeffrey Summers
*/
// This anonymous function can be inserted anywhere
// (eg. within a <script> tag or anywhere in an existing .js file)
(simplyNavDuty => {
const sideNav = document.querySelector('.nav-list'),
toggleNavBtn = document.querySelector('.toggle-nav'),
burger = document.querySelector('.burger'),
pageOverlay = document.querySelector('.overlay'),
navLinks = document.querySelectorAll(".link"),
body = document.querySelector('body'),
html = document.querySelector('html');
// Disable page scroll
function disablePageScroll() {
if (sideNav.classList.contains('-open')) {
body.classList.add('_disableScroll');
html.classList.add('_disableScroll');
} else {
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
};
// Nav funtion (toggle)
function toggleNav() {
sideNav.classList.toggle('-open');
pageOverlay.classList.toggle('-open');
burger.classList.toggle('open');
disablePageScroll();
};
// To default
toDefaults = () => {
// Close nav menu
sideNav.classList.remove('-open');
pageOverlay.classList.remove('-open');
burger.classList.remove('open');
// Make sure scrolling is enabled
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
// Event listeners
toggleNavBtn.addEventListener('click', toggleNav);
pageOverlay.addEventListener('click', toggleNav);
// (on mobile) close nav menu when link is clicked
// this is useful on mobile when clicking an anchor tag on the current page (eg. index.html#last-section)
navLinks.forEach(el => {
el.addEventListener('click', (event) => {
toDefaults();
});
});
// when browser is resized (past breakpoint) reset to defaults
(function() {
window.addEventListener("resize", resizeThrottler, false);
let resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
// handle the resize event
// Window resized width
let width = window.innerWidth;
// If resized greater than BREAKPOINT (default: 800px), then reset nav functions
if (width >= 800) {
toDefaults();
}
}
}());
})();
/*******HAMBURGER TOGGLE*******/
.toggle-nav {
background-color: transparent;
cursor: pointer;
box-shadow: none;
border: 0;
outline: none;
margin: 0;
padding: 3vh;
}
.logo-link {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
}
.logo-link>.logo {
max-width: 60px;
width: 100%;
height: auto;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transition: max-height 0.2s ease-in-out;
-webkit-transition: max-height 0.2s ease-in-out;
}
/*******HAMBURGER TOGGLE*******/
.nav-list {
background-color: transparent;
list-style: none;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 10vh;
bottom: 0;
left: -50rem;
width: 60%;
min-height: 100vh;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
z-index: 6;
}
.nav-list.-open {
width: 100%;
left: 0;
padding-bottom: 4.5rem;
}
.nav-list.-open>.list.-left {
overflow-y: auto;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-list>.list.-left {
background: rgba(50, 31, 101, 0.95);
position: relative;
width: 60%;
height: 100%;
}
.overlay {
margin: 0;
padding: 0;
display: block;
min-height: 100vh;
background: rgb(0 0 0 / 65%);
position: absolute;
bottom: 0;
width: 100%;
top: 10vh;
cursor: pointer;
z-index: 5;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s linear;
}
.toggle-overlay {}
.overlay.-open {
visibility: visible;
opacity: 1;
}
/****** LIST ITEMS ******/
.nav-list>.list>.item {
display: flex;
padding: 0;
border-bottom: 1px solid rgba(176, 176, 176, 0.5);
}
.nav-list>.list>.item:last-child {
border-bottom: 0;
}
.nav-list>.list>.item>.link {
border-color: transparent;
text-decoration: none;
padding: 1.5rem 1rem 1.5rem 1rem;
flex-basis: 100%;
display: block;
background: transparent;
font-size: 1.5rem;
padding-left: 1.5rem;
color: #e0e0e0;
transition: all 0.3s ease-in-out;
}
.nav-list>.list>.item>.link:hover,
.nav-list>.list>.item>.link.-active {
color: #e90052;
}
._disableScroll {
overflow-y: hidden !important;
}
/***********BURGER BUTTON STYLES***********/
.burger {
height: 3em;
width: 3em;
position: relative;
font-size: 10px;
cursor: pointer;
-webkit-transition: .2s all;
-o-transition: .2s all;
transition: .2s all;
}
.burger:after {
content: '';
display: block;
position: absolute;
height: 150%;
width: 150%;
top: -25%;
left: -25%;
}
.burger>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger>.burger-lines:before {
left: 0;
top: 1em;
}
.burger>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-offset>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines,
.burger.-squeeze .burger-lines:before,
.burger.-squeeze .burger-lines:after {
-webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
-o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset .burger-lines:before,
.burger.-squeeze.-offset .burger-lines:after {
width: 2em;
}
.burger.-squeeze.-offset .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset .burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open .burger-lines,
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
-webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
-o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open .burger-lines {
background-color: transparent;
}
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open .burger-lines:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.burger.-squeeze.open .burger-lines:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.burger-lines,
.burger-lines:after,
.burger-lines:before {
pointer-events: none;
display: block;
content: '';
width: 100%;
border-radius: 0.25em;
background-color: #e0e0e0;
height: 0.25em;
position: absolute;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.burger.-squeeze>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-squeeze>.burger-lines,
.burger.-squeeze>.burger-lines:after,
.burger.-squeeze>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze>.burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset>.burger-lines,
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open>.burger-lines,
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.open>.burger-lines {
background-color: transparent;
}
.burger.-squeeze.open>.burger-lines:before,
.burger.-squeeze.open>.burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open>.burger-lines:before {
transform: rotate(-45deg);
}
.burger.-squeeze.open>.burger-lines:after {
transform: rotate(45deg);
}
<header>
<button class="toggle-nav" type="button">
<div class="burger -squeeze -offset" type="button">
<span class="burger-lines"></span>
</div>
</button>
<ul class="nav-list" role="navigation">
<div class="list -left">
<li class="item">
<a class="link" href="#">Menu item 1</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 2</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 3</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 4</a>
</li>
</div>
</ul>
<div class="overlay"></div>
</header>

That actually looks like a css problem. The tag <ul class="nav-list -open"> has a width of 100%, and for that reason it fills up the whole screen, not allowing the mouse click to get to the overlay element. You should:
remove width: 100% on the -open class (the source of the problems)
remove width: 60% on the .list.-left (The child of the nav doesn't fill it, it doesn't make too much sense...)
set left: -80rem instead of 50rem in .nav-list (to fully hide it)
That would make it work.

jQuery add/remove class or toggle class

Im just curious to know the best practice for either toggling a class or just adding and removing it during a mouseenter/mouseleave state using jquery. Both seem to work fine im just not to sure which is best to go with.
Thank you
$('#image1').mouseenter(function() {
$('#image1').toggleClass('transform');
$('#image1 .images-color-overlay').toggleClass('transparent');
$('#image1 .images-text').toggleClass('show-images-text');
});
$('#image1').mouseleave(function() {
$('#image1').toggleClass('transform show-images-text');
$('#image1 .images-color-overlay').toggleClass('transparent');
$('#image1 .images-text').toggleClass('show-images-text');
});
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
.show-images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.transform {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.transparent {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>

Well a lot of this style question get shot down here on SO, because it seems it comes down to preference. But HERE is a way to do it all without javascript, only CSS, which some might consider more efficient.
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
#image1:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#image1:hover .images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.images-color-overlay:hover {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>

Your code is technically fine, however you can shorten it to just use the hover() method, as the function you provide will be called for both mouseenter and mouseleave events.
You can also use the this reference in the function to save DOM accesses, and also cache the jQuery object created from $(this) in a variable for re-use. Try this:
$('#image1').hover(function() {
var $image = $(this).toggleClass('transform');
$image.find('.images-color-overlay').toggleClass('transparent');
$image.find('.images-text').toggleClass('show-images-text');
});
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
.show-images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.transform {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.transparent {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>

The toggleClass is the bast practice in your case.
Internally it's also doing same thing if the class exist then remove it and if not then add it. See it yourself , goto this github link and search for toggleClass.
// Check each className given, space separated list
if (self.hasClass(className)) {
self.removeClass(className);
} else {
self.addClass(className);
}

Scroll to top arrow is hidden on html, body 100% height

I have implemented a scroll to top arrow using Jquery, and its working perfectly. But my problem is when I set body, html to 100% height it hides itself.
Check this fiddle here
Html is as follows,
<body>
<main id="top">
........
main content goes here
....
</main>
<!-- goto top arrow -->
Top
</body>
CSS
body, html {
overflow-x: hidden;
height: 100%; /* when I remove this, it works */
}
main {
height:100%;
position: relative;
overflow-y: auto;
}
.goto-top {
display: inline-block;
height: 40px;
width: 40px;
bottom: 20px;
right: 20px;
position: fixed;
border-radius:50%;
overflow: hidden;
white-space: nowrap;
opacity:0;
z-index:999;
background:#CCCCCC;
visibility: hidden;
color:#111111;
}
When I remove 100% height from html,body element, It works perfectly. I am totally confused. What should be the CSS for .goto-top, html and body?
Note:
I wanted to keep body,html height to 100% (Its required - not min-height)

You need to remove overflow : hidden; on the body see the code below :)
var offset = 300, /* visible when reach */
offset_opacity = 1200, /* opacity reduced when reach */
scroll_top_duration = 700,
$back_to_top = $('.goto-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('goto-is-visible') : $back_to_top.removeClass('goto-is-visible goto-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('goto-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
body, html {
height : 100%;
}
main {
height:100%;
position: relative;
overflow-y: auto;
height:2000px
}
.goto-top {
display: inline-block;
height: 40px;
width: 40px;
bottom: 20px;
right: 20px;
position: fixed;
padding-top:11px;
text-align:center;
border-radius:50%;
overflow: hidden;
white-space: nowrap;
opacity:0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
z-index:999;
background:#CCCCCC;
visibility: hidden;
color:#111111;}
.goto-top.goto-is-visible, .goto-top.goto-fade-out, .no-touch .goto-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;}
.goto-top.goto-is-visible {
visibility: visible;
opacity: 1;}
.goto-top.goto-fade-out {
opacity: .8;}
.no-touch .goto-top:hover,.goto-top:hover {
background:#FFFFFF}
.goto-top.goto-hide{
-webkit-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
visibility:hidden;}
#media only screen and (min-width: 768px) {
.goto-top {
right: 40px;
bottom: 40px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="top">scroll below</main>
<!-- goto top arrow -->
Top

css opacity ease in out affecting other elements too

My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)
Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).
The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?
Attempts to solve this:
Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp,
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.
function changeBackground(newUrl) {
//check which layer is currently activated
if ($('#background-image-top').hasClass('transparent')) {
//place new image over top layer
$('#background-image-top').css('background-image', 'url(' + newUrl + ')');
//fade in new image
$('#background-image-top').toggleClass('transparent');
} else {
//place new image over bottom layer
$('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
//fade out old image
$('#background-image-top').toggleClass('transparent');
}
}
#background-image-top {
background-image: url("../images/default.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out; }
#background-image-bot {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.transparent {
opacity: 0.25;}
.formDiv {
background-color: red;
max-width: 500px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 35%;}
#searchForm input {
width: 300px;
height: 30px;
font-size: 18px;}

I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)
and then use a click function with jQuery to toggle the effect.
the css:
form {
position: relative;
z-index: 10;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hide {
opacity: 0;
}
http://jsfiddle.net/9jb68w2o/

+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code
$(document).ready(function() {
$('#toggle').click(function(e) {
e.preventDefault();
$('#background1').toggleClass('color1');
});
});
body {
background-color: #f8f8f8;
color: #555;
}.container {
position: relative;
margin: 30px auto;
padding: 20px;
width: 200px;
height: 150px;
background-color: #fff
}
form {
position: relative;
z-index: 10;
}
input[type=text] {
margin: 10px 0;
padding: 5px;
width: calc(100% - 10px);
font-size: 15px;
outline: none;
}
input[type=submit] {
width: 100%;
text-transform: uppercase;
font-size: 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background1.color1 {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="background1"></div>
<form>
<h2>Awesome form!</h2>
<input type="text" placeholder="Some text here" />
<input id="toggle" type="submit" value="Change now!" />
</form>`enter code here`
</div>

Create CSS3 Circles with text inside

I am trying to add text inside a CSS3 circle. But the text is outside of the circles proportion. When I hover over the circle it changes color but I would also like for the text to dissapear as well.
Extras: Is there a way to create make the circle pulsate while mouse is over it? Will jquery or javascript be necessary?
Example : http://jsfiddle.net/jqEzZ/2/
<style>
.cn-nav > a{
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev{
left: 0px;
}
a.cn-nav-next{
right: 0px;
}
.cn-nav a span{
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
-moz-border-radius: 23px;
-webkit-border-radius: 23px;
border-radius: 23px;
cursor: pointer;
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cn-nav a.cn-nav-prev span{
background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a div{
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.cn-nav a:hover span{
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0.6;
margin: -50px 0 0 -50px;
background-size: 22px 32px;
background-color:#a8872d;
}
.cn-nav a:hover div{
width: 90px;
height: 90px;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
}
</style>
HTML
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Previous</span>
<div style="background-image:url(images/1.jpg);"></div>
</a>
</div>

In your span style set:
.cn-nav a span {
overflow: hidden;
….
}
and remove text-indent: -9000px;
To make the text disappear, set the color equal to the background color on hover:
.cn-nav a:hover span {
...
background-color:#a8872d;
color: #a8872d;
}
Demo
If you want the circle to pulsate, look at using an animation (MDN Docs) for your hover rather than a simple transition.

I can't see what kind of picture you are using as a background image but I have an idea on how to place the text inside of the circle and hide it on hover.
I think I would solve this using a pseudoelement since you can than place text inside of your link and center it as well.
On hover you could then just put opacity: 0 or empty the content (content: "";)
I did simplify the markup just to show you how I'd solve it with the pseudoelement.
http://dabblet.com/gist/6406590

It's possible to make it pulsate purely with CSS using CSS3 animations. Learn more here.
JSfiddle: http://jsfiddle.net/Q3gMS/1/
HTML:
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<p>Click ME!</p>
<span></span>
<div style="background-image:url(images/1.jpg);"></div>
</a>
</div>
CSS:
.cn-nav > a {
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev {
left: 0px;
}
a.cn-nav-next {
right: 0px;
}
.cn-nav a span {
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
border-radius: 23px;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
-webkit-background-size: 17px 25px;
-moz-background-size: 17px 25px;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cn-nav a p {
display: block;
height: 70px;
width: 70px;
line-height: 70px;
text-align: center;
margin: 0;
padding: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.cn-nav a:hover p {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.cn-nav a:hover span {
-webkit-animation: pulsate 1s infinite;
-moz-animation: pulsate 1s infinite;
-ms-animation: pulsate 1s infinite;
-o-animation: pulsate 1s infinite;
animation: pulsate 1s infinite;
}
#keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-moz-keyframes pulsate {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-webkit-keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-ms-keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-o-keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
.cn-nav a.cn-nav-prev span {
background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a div {
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.cn-nav a:hover span {
width: 100px;
height: 100px;
border-radius: 50px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
margin: -50px 0 0 -50px;
-webkit-background-size: 22px 32px;
-moz-background-size: 22px 32px;
background-size: 22px 32px;
background-color: #a8872d;
}
.cn-nav a:hover div {
width: 90px;
height: 90px;
-webkit-background-size: 120% 120%;
-moz-background-size: 120% 120%;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
border-radius: 45px;
}

HTML
<a class="circle"></a>
CSS
.circle {
position: relative;
width: 100px;
height: 100px;
margin: 50px auto;
background: #bada55;
display: block;
border-radius: 50%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.circle:after {
content: "Hover Here";
position: absolute;
width: 100%;
text-align: center;
top: 40%;
}
.circle:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
background: #82983b;
}
.circle:hover:after {
content: "";
}
DEMO
For now, this just scales on hover and changes color. What did you mean by pulsate -- kinda like this? Pulsate w/ Keyframes