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.

Multiple CSS animations: How to avoid re-triggering one of them?

I am trying to build an animated menu for mobile apps similar to Pinterest's radial menu. I have managed to get the behaviour to where I want it except for one minor detail: when the menu opens, the items shoot out as I want them to, and when you hover on them, they transform as I want them to. problem is, after the cursor leaves the items, they re-trigger their original animation, instead of just returning to their previous state. I realise this is a problem to do with the class being used for the animation and I have tried a number of solutions, including deleting the class and adding a new one .onmouseover() and changing animation running state on hover/mousover. I am probably missing something simple and idiotic, but I just cannot see it. can anybody help?
The following code is just the way I had it before trying to implement solutions.
HTML:
<!--Footer-->
<div class="footer">
<!--RADIAL NAV MENU-->
<div id="navContainer">
<!--Buttons-->
<div id="workouts" class="sml smlOne">Go there</div>
<div id="home" class="sml smlTwo">Go here</div>
<div id="profile" class="sml smlThree">Go somewhere</div>
<!--Burger-->
<div class="burger-menu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
</div>
</div>
CSS:
.footer
{
position: fixed;
bottom: 0%;
width: 100%;
height: 50px;
background-color: #d36363;
box-shadow: 0px -6px 6px #888888;
z-index: +2;
}
/* Burger menu section */
#navContainer
{
text-align: center;
font-size: 10px;
}
.burger-menu
{
position: relative;
margin: auto;
height: 100%;
width: 50px;
}
.bar
{
height: 6px;
width: 100%;
background-color: white;
}
#top
{
position: relative;
top: 5px;
}
#middle
{
position: relative;
top: 15px;
}
#bottom
{
position: relative;
top: 25px;
}
.barTop, .barMid, .barBot
{
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.barTopOn
{
transform: rotate(45deg) translateY(12px) translateX(11px);
}
.barMidOn
{
opacity: 0;
}
.barBotOn
{
transform: rotate(-45deg) translateY(-12px) translateX(11px);
}
/* Navigation buttons section */
#navContainer
{
position: relative;
margin: auto;
width: 50px;
}
.sml
{
border: 2px solid #58a7dd;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: white;
box-shadow: 6px 6px 6px #888888;
transform: scale(0);
}
#workouts
{
position: absolute;
bottom: 10px;
left: -60px;
}
#home
{
position: absolute;
bottom: 50px;
}
#profile
{
position: absolute;
bottom: 10px;
left: 60px;
}
.smlOnOne
{
animation: pop, slideOne 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnTwo
{
animation: pop, slideTwo 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnThree
{
animation: pop, slideThree 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnOne:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopL 0.2s;
animation-fill-mode: forwards;
}
.smlOnTwo:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopC 0.2s;
animation-fill-mode: forwards;
}
.smlOnThree:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopR 0.2s;
animation-fill-mode: forwards;
}
#keyframes pop
{
100%
{
transform: scale(1,1);
}
}
#keyframes slideOne
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: -60px;
}
}
#keyframes slideTwo
{
0%
{
bottom: -20px;
}
100%
{
bottom: 50px;
}
}
#keyframes slideThree
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: 60px;
}
}
#keyframes whopL
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(-10px);
}
}
#keyframes whopC
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px);
}
}
#keyframes whopR
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(10px);
}
}
JS/jQuery:
$(".burger-menu").click(function()
{
$(".barTop").toggleClass("barTopOn");
$(".barMid").toggleClass("barMidOn");
$(".barBot").toggleClass("barBotOn");
$(".smlOne").toggleClass("smlOnOne");
$(".smlTwo").toggleClass("smlOnTwo");
$(".smlThree").toggleClass("smlOnThree");
});
Here is a working demo:
https://codepen.io/BGGrieco/pen/NgjxXq

You have an element that is a set of #-webkit-keyframes to animate in. On hamburger-menu click, these keyframes run, and that works well.
Next, you have a second set of #-webkit-keyframes on hover, so on hover works well too.
However, the instant the mouse is away from the element, the first (intro) set of keyframes gets run again. You don't want it to run after it first runs.
Here is what I was able to accomplish:
https://codepen.io/CapySloth/pen/RgxKEb
<div id="workouts" class="sml smlOne">
<div class="test1">
Go there
</div>
</div>
Instead of stacking classes which contain keyframe animations onto the one ".sml" class, I have split the task between two elements. ".sml" now acts as a wrapper which takes care of the "hamburger-menu open" animation and "test1 a" takes care of the "whop" animation.
If you can find a way to hide/show parents of the "test1 a/test2 a/test3 a" then you will have what you want.

You can use .stop() before your .toggleClass.
$("#example").stop().toggleClass("class");

How to adjust section margin after transition

I have a div that transitions on the Y-axis by 100px. I am wanting my blue div #home-section3 to not have any top margin from .home-section2 after the transition, but ideally I do not want to have to set the margin-top to -100px for every div below the transition div. Is there a different way in which I can get the white-space gap to not appear after the transition finishes?
Here is a fiddle.
function section2Delays() {
$('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);
.home-section2 {
display: inline-block;
width: 50%;
height: 300px;
vertical-align: top;
margin-top: 100px;
opacity: 0;
transition: 1s;
-webkit-transition: 1s;
background: green;
}
.home-section2.fadeDisplay {
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
transition: 1s;
-webkit-transition: 1s;
opacity: 1;
}
#home-section3 {
width: 100%;
max-width: 100%;
height: auto;
background: #094765;
padding: 50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>

add margin-bottom:-100px in class .fadeDisplay
function section2Delays() {
$('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);
.home-section2 {
display: inline-block;
width: 50%;
height: 300px;
vertical-align: top;
margin-top: 100px;
opacity: 0;
transition: 1s;
-webkit-transition: 1s;
background: green;
}
.home-section2.fadeDisplay {
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
transition: 1s;
-webkit-transition: 1s;
opacity: 1;
margin:0 0 -100px 0 ;
}
#home-section3 {
width: 100%;
max-width: 100%;
height: auto;
background: #094765;
padding: 50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>

You can probably use margin-top instead of transform.
.fadeDisplay {
margin-top: 0;
}
jsFiddle
In fact, the whole animation can be done with CSS only.
.home-section2 {
margin-top: 100px;
opacity: 0;
animation: ani 2s forwards;
}
#keyframes ani {
to {
margin-top: 0;
opacity: 1;
}
}
jsFiddle

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);
}

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