I'm trying to animate a hamburger button. The problem is that the animation works great only for the first click, and I do not know how to make the second click do the reverse animation. I'm not sure if this can be done without using keyframes. Ps. brackets in css are not formatted because its compiled from scss.
var hamburger = document.getElementById("hamburger");
var nav_items = document.getElementsByClassName("nav-items")[0];
var line1 = document.getElementsByClassName("line1")[0];
var line2 = document.getElementsByClassName("line2")[0];
var line3 = document.getElementsByClassName("line3")[0];
hamburger.addEventListener("click", function() {
nav_items.classList.toggle("nav-open");
line1.classList.toggle("first-line");
line2.classList.toggle("middle-line-hidden");
line3.classList.toggle("last-line");
});
body {
background-color: white;
margin: 0;
padding: 0;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
height: 100px;
color: white;
z-index: 100;
background-color: blue;
}
#logo {
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
font-size: 25px; }
#logo a {
text-decoration: none;
color: white; }
#logo a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 100%;
background-color: yellow;
z-index: -1; }
.nav-items {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
visibility: hidden;
justify-content: center;
font-size: 2rem;
background-color: black; }
.nav-items a {
text-decoration: none;
color: white;
margin: 15px 0; }
.nav-items a:first-child {
margin-top: 0; }
.nav-items a:hover {
color: yellow; }
#hamburger {
height: 40px;
width: 40px;
background-color: transparent;
border: 0px solid transparent;
padding: 0;
position: absolute;
right: 80px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
#hamburger .line1,
#hamburger .line2,
#hamburger .line3 {
position: absolute;
left: 0;
height: 5px;
width: 100%;
background-color: white;
border-radius: 25px;
transition: 0.5s linear; }
#hamburger .line1 {
top: 3px; }
#hamburger .line2 {
top: 50%;
transform: translateY(-50%); }
#hamburger .line3 {
bottom: 3px; }
.nav-open {
visibility: visible; }
.middle-line-hidden {
animation: hamburger-mid-line 0s linear;
animation-fill-mode: forwards;
animation-delay: 0.3s; }
.first-line {
animation: hamburger-first-line 0.5s;
animation-fill-mode: forwards; }
.last-line {
animation: hamburger-last-line 0.5s;
animation-fill-mode: forwards; }
#keyframes hamburger-mid-line {
from {
visibility: visible; }
to {
visibility: hidden; } }
#keyframes hamburger-first-line {
0% { }
50% {
top: 50%;
transform: translateY(-50%); }
100% {
top: 42%;
transform: rotate(45deg); } }
#keyframes hamburger-last-line {
0% { }
50% {
bottom: 50%;
transform: translateY(50%); }
100% {
bottom: 45%;
transform: rotate(-45deg); } }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<header id="navbar">
<div class="nav-items">
link1
link2
link3
</div>
<button id="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</button>
</header>
</body>
</html>
The most easy way is to assign in the css the animation to a class, for example .openedhamburger with the opening animation.
Now create other animation assigned to other class, for example .closedhamburger, with the closing animation.
Finally switch the class asigned to the element with javascript and there it is, whenever a different class is assigned, the proper animation will be triggered.
Edit: also, albeit in your case use a two step animation, so this is not applicable, know that using this class-approach, if you enable smooth transitions, then sometimes you can even do it without any animation: simply associate the positions and rotations for the elements on the two states and then because smooth transformations are enabled, animation will ocur.
Related
The menu expands and contracts when I click on a button.
The button toggles the "active" class when I click it as expected with only the code required for that action.
However, when I add the code to make the the menu contract when clicking elsewhere on the page, it only contracts when clicking everything EXCEPT for the button.
The button is no longer clickable and the menu remains expanded until I click on a link or on the body of the page.
EDIT: As I was typing this out on a jsfiddle, I got an error on that console that I don't see in my dev tools:
Uncaught ReferenceError: jQuery is not defined
The reason why I am not using the "$"symbol that I see everyone using, and I am writting out "jQuery" in front of everything is because that's the only way I could make DIVI (the wordpress builder) compile the code
jQuery(document).ready(function(){
jQuery('.nav__button').click(function(){
jQuery(this).toggleClass('button--active');
jQuery('.nav__row').toggleClass('nav__row--active');
});
});
jQuery(document).mouseup(e => {
if (!jQuery('nav__container').is(e.target)
&& jQuery('nav__container').has(e.target).length === 0) {
jQuery('.nav__row').removeClass('nav__row--active');
jQuery('.nav__button').removeClass('button--active');
}
});
And If I add this line of code, I break the code all together.
jQuery('.nav__button').is(e.target) ||
This line is added to the second function, to say that "If I click on the button OR elsewhere" [contract the menu]
jQuery(document).ready(function(){
jQuery('.nav__button').click(function(){
jQuery(this).toggleClass('button--active');
jQuery('.nav__row').toggleClass('nav__row--active');
});
});
jQuery(document).mouseup(e => {
if (!jQuery('nav__container').is(e.target)
&& jQuery('nav__container').has(e.target).length === 0) {
jQuery('.nav__row').removeClass('nav__row--active');
jQuery('.nav__button').removeClass('button--active');
}
});
.nav__row {
transition: .3s;
overflow: visible !important;
}
.nav__container {
display: flex;
justify-content: space-around;
height: 30px;
}
.nav__container img {
height: 14px;
margin-top: auto;
}
.nav__link-panel {
position: absolute;
width: 175px;
height: 220px;
top: 0;
left: 0;
text-align: right;
transform: translatex(-100%);
background-color: #dcf5ee;
padding-top: 75px !important;
padding-right: 25px !important;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.nav__row.nav__row--active {
transition: .3s;
transform: translatex(70%);
}
/*Hamburger animation*/
.nav__button {
width: 24px;
height: 6px;
position: relative;
background: transparent;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
border: none;
}
.nav__button span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: red;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.nav__button span:nth-child(1) {
top: 0px;
transform-origin: left center;
}
.nav__button span:nth-child(2) {
top: 8px;
width: 80%;
transform-origin: left center;
}
.nav__button span:nth-child(3) {
top: 16px;
transform-origin: left center;
}
.nav__button.button--active span:nth-child(1) {
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.nav__button.button--active span:nth-child(2) {
width: 0%;
opacity: 0;
}
.nav__button.button--active span:nth-child(3) {
transform: rotate(-45deg);
top: 17px;
left: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav__container">
<div class="nav__menu">
<button class="nav__button">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav__link-panel" >
<li><a> Contact </a></li>
</ul>
</div>
</div>
The toggles in each of your handlers are competing with each other: events from one will bubble up to the other causing them to both fire simultaneously, toggling the nav right back to its initial state. Here I changed the 'body' handler to only remove the 'active' classes; and added a stopPropagation to the nav click handler so it doesn't bubble up and also trigger the body handler.
(I also added a bit of CSS to cause body to fill the viewport.)
jQuery(document).ready(function(){
jQuery('.nav__button, .nav__container').click(function(e){
jQuery('.nav__button').toggleClass('button--active');
jQuery('.nav__row').toggleClass('nav__row--active');
e.stopPropagation() // prevents the event from also triggering the 'body' handler below
});
// Remove (don't toggle) 'active' when clicking outside the nav:
jQuery('body').click(function(e){
jQuery('.nav__button').removeClass('button--active');
jQuery('.nav__row').removeClass('nav__row--active');
e.stopPropagation()
});
});
body {height: 100vh}
.nav__row {
transition: .3s;
overflow: visible !important;
}
.nav__container {
display: flex;
justify-content: space-around;
height: 30px;
}
.nav__container img {
height: 14px;
margin-top: auto;
}
.nav__link-panel {
position: absolute;
width: 175px;
height: 220px;
top: 0;
left: 0;
text-align: right;
transform: translatex(-100%);
background-color: #dcf5ee;
padding-top: 75px !important;
padding-right: 25px !important;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.nav__row.nav__row--active {
transition: .3s;
transform: translatex(70%);
}
/*Hamburger animation*/
.nav__button {
width: 24px;
height: 6px;
position: relative;
background: transparent;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
border: none;
}
.nav__button span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: red;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.nav__button span:nth-child(1) {
top: 0px;
transform-origin: left center;
}
.nav__button span:nth-child(2) {
top: 8px;
width: 80%;
transform-origin: left center;
}
.nav__button span:nth-child(3) {
top: 16px;
transform-origin: left center;
}
.nav__button.button--active span:nth-child(1) {
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.nav__button.button--active span:nth-child(2) {
width: 0%;
opacity: 0;
}
.nav__button.button--active span:nth-child(3) {
transform: rotate(-45deg);
top: 17px;
left: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav__container">
<div class="nav__menu">
<button class="nav__button">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav__link-panel" >
<li><a> Contact </a></li>
</ul>
</div>
</div>
I have made a toggle switch and I would like to integrate it into my site but I am unsure how to do this. I am using the plugin bbPress on my WordPress site and would like for the user of the website to be able to click the toggle switch when leaving a comment and then for their input to be displayed on their comment.
Here is the HTML for the toggle switch:
`
<!-- ____[TOGGLE BUTTON]____ -->
<div class="toggle">
<!-- ____[OUTER BOX WITH BORDER LINE]____ -->
<div class="toggle__box">
<!-- ____[INPUT WITHOUT VISIBILITY LINKED WITH LABEL]____ -->
<input type="checkbox" id="toggle-check">
<!-- ____[TOGGLE LABEL FOR INPUT]____ -->
<label for="toggle-check" class="toggle__label">
<!-- ____[TOGGLE THUMB ICON]____ -->
<div class="toggle__thumb">
<img src= <?php get_image_for_slider(); ?> >
</div>
<!-- ____[TEXT OF TOGGLE]____ -->
<div class="toggle__text--green">BULLISH</div>
<div class="toggle__text--red">BEARISH</div>
</label>
</div>
</div>
`
and then here is the CSS for this button:
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
;
}
.toggle input {
display: none;
opacity: 0;
}
.toggle__box {
width: 13rem;
height: 4rem;
border-radius: 100px;
border: 1px solid #707070;
position: relative;
overflow: hidden;
}
.toggle__label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}
.toggle__thumb {
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
left: .6rem;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.toggle__thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.toggle__text--red,
.toggle__text--green {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.6rem;
font-weight: 500;
-webkit-transition: all .005s linear;
transition: all .005s linear;
z-index: 0;
}
.toggle__text--red {
color: #FF001A;
left: 10%;
opacity: 0;
visibility: hidden;
}
.toggle__text--green {
right: 10%;
color: #29FF00;
}
.toggle #toggle-check:checked+label .toggle__thumb {
left: calc(100% - .6rem);
transform: translate(-100%, -50%);
}
.toggle #toggle-check:checked+label .toggle__text--red {
opacity: 1;
visibility: visible;
}
.toggle #toggle-check:checked+label .toggle__text--green {
opacity: 0;
visibility: hidden;
}`
Is there some way to link a variable to this switch/checkbox and so when the user clicks it I can use that to display something to the screen - as mentioned above? I have tried using isset($_POST["name"] but that didn't seem to work. I have also seen that maybe adding an event listener in JavaScript could work but I am not sure how to code in Java so any help would be great!
Many Thanks
You should be able to solve this using JS. Just insert this JS and then put what every you want in the function.
document.getElementById("toggle-check").addEventListener("click", funct1);
function funct1() {
/* you can put what ever function or thing you want to happen when you click the box here!*/
document.getElementById('p').innerHTML = "When you click the box this text will show up!";
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
;
}
.toggle input {
display: none;
opacity: 0;
}
.toggle__box {
width: 13rem;
height: 4rem;
border-radius: 100px;
border: 1px solid #707070;
position: relative;
overflow: hidden;
}
.toggle__label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}
.toggle__thumb {
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
left: .6rem;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.toggle__thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.toggle__text--red,
.toggle__text--green {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.6rem;
font-weight: 500;
-webkit-transition: all .005s linear;
transition: all .005s linear;
z-index: 0;
}
.toggle__text--red {
color: #FF001A;
left: 10%;
opacity: 0;
visibility: hidden;
}
.toggle__text--green {
right: 10%;
color: #29FF00;
}
.toggle #toggle-check:checked+label .toggle__thumb {
left: calc(100% - .6rem);
transform: translate(-100%, -50%);
}
.toggle #toggle-check:checked+label .toggle__text--red {
opacity: 1;
visibility: visible;
}
.toggle #toggle-check:checked+label .toggle__text--green {
opacity: 0;
visibility: hidden;
}
`
<input type="checkbox" class="toggle" id="toggle-check">
<p id="p"></p>
I am using an animated arrow with the following code:
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
The issue is that when I click on the two arrow lines, the onclick() does not work. It works only if I click in the surrounding area of the two lines, that is enclosed by the border of the parent div with id start-arrow.
The desired behavior is for the onclick to work in the entire area enclosed by the start-arrow div.
I tried using z-index to make the start-arrow div be on top, but it's not working. I tried messing with display and also with position of the elements in CSS but no luck as well. However I should mention that I'm looking for a solution that does not include changing the position attributes of the elements.
How can I make the onclick fire regardless of where I click in the start-arrow div area?
EDIT: it seems to be working a lot better inside Stack Overflow, why? However if a click on top of the border of each line, it doesn't always work. I am opening mine (exact same code) in Firefox (it doesn't work inside my asp.net either).
Why don't we simply wrap the elements into another parent element and bind the event on that? I am able to solve it using a parent element ('parent-id').
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div id="parent-id" onclick="startDownload()">
<div class="arrow" id="start-arrow" style="z-
index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
</div>
let parent = document.getElementById("start-arrow");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
This is not the most optimize solution, but it should do the trick, other solution is to increase click box by adding it padding.
let parent = document.getElementById("filterInput");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
The problem is you're attaching a click event listener. That means if you want it to fire, the element needs to be clicked & released.
If you click on your element, it moves to the upper-left. Now if you're slow enough the element isn't below your mouse pointer anymore, thus the click event won't fire because you released the mouse somewhere below.
So simply replace
onclick="startDownload()"
by
onmousedown="startDownload()"
and make sure you don't have an alert dialog in the callback function since it would stop the movement of your arrow. Simply trace something using console.log("fired");
Do it with jquery. Use the id start-arrow
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
Try this:
$(document).on('click','#start-arrow',function(){
alert('Hi');
});
I'm trying to implement an animated menu icon I found on codepen by Balaj Marius. The design is here.
When I try it in my project (or even independently in separate files), it doesn't work. The icon appears, but the javascript doesn't seem to be running. I'm assuming it's an obvious answer, but it's currently beating me. Any ideas on how to get it up and running?
Here is how I have it:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/javascript" href="js/main.js">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="content">
<h2>Scroll to see the magic.</h2>
<div class="header__fake">
<div class="icn__wrap">
<i class="icn__hamburger"></i>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
</svg>
</div>
<i class="btm__border"></i>
</div>
<h1>Tah-da!<span>Now scroll back up.</span></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
css:
body {
background: #02021a url("https://raw.githubusercontent.com/balajmarius/hamburger-animation/master/assets/img/bg.jpg") no-repeat 0 0;
-webkit-background-size: 100% auto;
background-size: 100% auto;
color: #fff;
font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
font-weight:lighter;
letter-spacing:1px;
}
.content {
width: 320px;
position: relative;
margin: 0 auto;
}
.content h2 {
margin: 35px 0 0;
}
.content h1 {
text-align: center;
margin: 1000px 0 200px;
}
.content h1 span {
display: block;
width: 100%;
margin: 5px 0 0;
opacity: .5;
}
.content .header__fake {
position: fixed;
top: 15px;
left: 50%;
margin-left: -160px;
width: 320px;
}
.content .header__fake i {
display: block;
}
.content .header__fake .btm__border {
height: 1px;
background: #fff;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.content .header__fake .icn__wrap {
cursor: pointer;
float: right;
width: 58px;
position: relative;
height: 58px;
margin-right: -20px;
}
.content .header__fake .icn__wrap .icn__hamburger {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-6px);
-ms-transform: translateX(-50%) translateY(-6px);
transform: translateX(-50%) translateY(-6px);
display: block;
width: 18px;
height: 1px;
z-index: 999;
background: #fff;
}
.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
content: "";
float: left;
display: block;
width: 100%;
height: 1px;
background: #fff;
margin: 5px 0 0;
}
.content .header__fake .icn__wrap .icn__hamburger:before {
margin: 6px 0 0;
}
.content .header__fake .icn__wrap svg {
z-index: 10;
}
.content .header__fake .icn__wrap svg circle {
fill: none;
stroke: #fff;
stroke-width: .5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.animated .btm__border {
left: 100%;
right: 4px;
}
.content .header__fake.animated svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.fix .btm__border {
-webkit-animation: fix 0.2s linear;
animation: fix 0.2s linear;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
right: 5px;
}
#-webkit-keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
#keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
js:
$(document).ready(function(){
console.log("ready");
$header = $('.header__fake');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
});
1st problem: I am trying to display the text overlay when the "point" class gets hovered, but for me works just the display when the "caption" class gets hovered, how to fix it?
2nd problem: I need to create a smooth zoom in image when the "point" class gets hovered, how can i do it?
Demo: http://jsfiddle.net/0qgcn2uu/12/
HTML:
<div class="caption">
<span class="point"></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://2.bp.blogspot.com/-TH7ATkZ55uw/VOatQSMgt4I/AAAAAAAAAUM/bB199rdZMuE/s1600/alone.png" />
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.captionHover::before {
background: rgba(248, 214, 215, .5);
}
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover: + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
jQuery:
$(document).ready(function() {
$(".point").mouseenter(function() {
$('.caption').addClass('captionHover');
});
$('.point').mouseleave(function() {
$('.caption').removeClass('captionHover');
});
});
All you need is the Adjacent sibling selector, General sibling selector and ftransform
*{
box-sizing: border-box
}
figure{
overflow: hidden;
width: 250px;
height: 250px;
margin: 50px auto;
z-index:1;
position: relative
}
figure span{
display: block;
width: 16px;
height:16px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer
}
figure img, figure figcaption{
-webkit-transition: 1s ease
}
figure figcaption{
position: absolute;
top: 100%;
z-index: 2;
width: 100%;
left: 0;
text-align: center;
color: white
}
figure span:hover + img{
-webkit-transform: scale(2,2)
}
figure span:hover ~ figcaption{
top: 50%
}
<figure>
<span class=point></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<figcaption>HELLO!</figcaption>
</figure>