My goal is as follows:
I have multiple div-elements (class = parent) that will contain images. The images should only be visibly when the user positions his mouse curser in the respective div-element. In addition, I want to enlarge the picture when the mouse curser is in the div and the picture is visible.
My idea was to create a child-element into the respective div-element. On mouseenter the child-element is set to display = 'none'. On mouseleave the child-element is set to display = 'block.
What I want to achieve is that the user can only see the parent-div when he positioned his mouse courser on the respective element. In the following code, the parent-div is green whereas the child-div is grey. So when the user moves his mouse onto one of the elements, the grey child-div should disappear and the parent div-should become visible. Therefore, the color of an element in this specific code should change from grey to green when the user positioned his mouse in the element.
I assume that I made a very basic mistake.
Thanks for your help.
$('#child_1').mouseenter(function(event) {
let target = event.target;
target.style.display = 'none';
})
.mouseleave(function(event) {
let target = event.target;
target.style.display = 'block'
});
$('#child_2').mouseenter(function(event) {
let target = event.target;
target.style.display = 'none';
})
.mouseleave(function(event) {
let target = event.target;
target.style.display = 'block'
});
$(document).ready(function() {
$("[id^=parent]").hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
.transition {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.child {
background: grey;
width: 100%;
height: 100%;
position: absolute;
box-shadow: inset 0 0 20px #fff;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
.parent {
background: darkolivegreen;
width: 300px;
height: 424px;
position: relative;
float: left;
margin: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent_1" class="parent">
<div id="child_1" class="child"></div>
</div>
<div id="parent_2" class="parent">
<div id="child_2" class="child"></div>
</div>
I just created this CodePen. Is this what you're looking for?
I have simplified your JavaScript so it just adds/removes an 'active' class when you roll over a parent div:
$('.img-wrapper').mouseenter(function(event) {
$(this).addClass('active');
})
$('.img-wrapper').mouseleave(function(event) {
$(this).removeClass('active');
});
The animation is dealt with in the css:
.img-wrapper {
overflow: hidden;
background: lightblue;
width: 300px;
height: 300px;
position: relative;
margin: 0 10px;
}
.img-wrapper img {
opacity: 1;
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: all .4s ease-in-out;
}
.img-wrapper.active img {
opacity: 0;
transform: translate(-50%, -50%) scale(1.25);
}
Related
I made a div with 2 elements inside: an image and an another div (about). The image is hiding the about div.
Is that possible to make elements which are in the about div clickable when the image disappear with a hover property ?
Thanks in advance !
Also, here's my code but the elements aren't clickable
#logo {
opacity: 1;
visibility: visible;
margin-top: 12.5px;
-webkit-transition: opacity 600ms, visibility 600ms;
-o-transition: opacity 600ms, visibility 600ms;
-moz-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
.blue_border:hover #logo {
opacity: 0;
visibility: hidden;
}
.blue_border {
width: 625px;
height: 625px;
background-image: url("./border.png");
background-repeat: no-repeat;
background-position: 50%;
}
#about {
z-index: -1;
position: relative;
margin-top: -605px;
width: 600px;
height: 600px;
border-radius: 100%;
background-color: #25B8EE;
}
<div class="blue_border">
<img id="logo" src="./logo.png" />
<!-- Img is "on" the about div" -->
<div id="about">
I want to be clicked :-(
</div>
<div class="la-ball-scale-multiple">
<div></div>
<div></div>
<div></div>
</div>
</div>
I don't think I understand it completely, but you cannot click under another element but you can use CSS display: none attr or you do this in a fake way. You can listen to the top element for this and check other conditions on javascript.
As mentioned in the comments, you may can use the pointer-events: none on the overlay to cause it to not receive click events, and allow them to pass through.
function whoWasClicked(e) {
console.log(`${e.target.id} was clicked!`);
};
document.querySelector('#lowerElement').addEventListener('click', whoWasClicked);
document.querySelector('#upperElement').addEventListener('click', whoWasClicked);
#lowerElement {
background-color: rgb(128, 128, 128);
min-width: 25vw;
height: 100px;
text-align: center;
position: absolute;
top: 37vh;
left: 37vw;
z-index: 1;
}
#upperElement {
min-width: 25vw;
height: 100px;
text-align: center;
line-height: 50px;
position: absolute;
top: 37vh;
left: 37vw;
z-index: 2;
pointer-events: none;
}
<div id="lowerElement">Click Me</div>
<div id="upperElement">Overlay</div>
With my current code, I think the z-index: -1; in #about is the problem: #blue_border is an image background and it's upper my "about" div... So I'm trying to find a way to replace that background.
Edit:
Okay. I figured out that the element with z-index: -1; will never be clickable the way I want to.
So I decided to reverse everything: the logo has now the property z-index: -1; and the about div (which is upper now) is hidden until the hover trigger. I also changed my background image by a border.
My code now :
/*Under #about and visible*/
#logo {
z-index: -1;
}
.blue_border {
width: 600px;
height: 600px;
border: 15px solid #71d1f4;
border-radius: 100%;
/*background-image: url("./border.png");
background-repeat: no-repeat;*/
background-position: 50%;
}
/*Hidden first*/
#about {
opacity: 0;
visibility: hidden;
position: relative;
margin-top: -605px;
width: 600px;
height: 600px;
border-radius: 100%;
background-color: #25B8EE;
-webkit-transition: opacity 600ms, visibility 600ms;
-o-transition: opacity 600ms, visibility 600ms;
-moz-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
/*Unhidden on hover*/
.blue_border:hover #about
{
opacity: 1;
visibility: visible;
}
I didn't changed my html
Thanks anyway guys. It was my very first question and I'm glad that some of you already answered me !
The website is https://ceremonycoffee.com/. How do I replicate their nav hover animation with the underline? I can't really find it in their inspect element. Also, is it made from CSS or Javascript? Thank you!
You can do it in full css, see this snippet :
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<h2>My Link</h2>
It relies on the ::before pseudo element. You set its horizontal scale to zero, add a transition property so that when hovered it transforms smoothly to the full link scale.
Source and explanation : Animating Links Underline
I'm attempting to create a script that changes the colour of the navigation bar if the nav is currently hovered over a part of the page that has a light/white background to keep the nav visible.
I want to change the colour of the hamburger menu which is laid out like so:
<div id="nav_ham" onclick="openNav()">
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
To change the colour of the spans, I want to add a class ham_dark which does the following:
.ham_dark { background: #000!important;}
I've given the white backgrounds a class of section_white and have applied the following code:
//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
// Check if the top of the page collides with each section
jQuery('.section_white').each(function() {
var windowScroll = jQuery(document).scrollTop();
var navHeight = jQuery('.nav').height();
// Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
if( windowScroll + navHeight >= jQuery(this).offset().top && windowScroll + navHeight <= jQuery(this).offset().top + jQuery(this).height()) {
// This section is active! Add Highlight
console.log('working');
jQuery('#nav_ham span').addClass('ham_dark')
} else {
// No - Remove highlight class
jQuery('#nav_ham span').removeClass('ham_dark')
}
});
}
jQuery(window).on('scroll resize', function () {
onScreen();
});
The console is logging "working" when the nav is hovering over all of the the section_white classes, however it only applies the addClass to the final section_white class on the page, ignoring all others.
Why is it that the console.log is firing on all of the classes but only applying the addClass to the final instance of section_white?
I have mocked this up and the error is still occuring (nav changes colour on final section_white div but not the first): jsfiddle
Thanks
As per my comments, your loop is not ending once you have added the dark class so it is being removed again. Try this (have returned false when class is added to break loop):
//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
// Check if the top of the page collides with each section
$('.section_white').each(function() {
var windowScroll = $(document).scrollTop();
var navHeight = $('.nav').height();
// Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
if (windowScroll + navHeight >= $(this).offset().top && windowScroll + navHeight <= $(this).offset().top + $(this).height()) {
// This section is active! Add Highlight
console.log('working');
$('.cls-1').addClass('logo_dark');
$('#nav_ham span').addClass('ham_dark')
return false; // break loop
} else {
// No - Remove highlight class
$('.cls-1').removeClass('logo_dark');
$('#nav_ham span').removeClass('ham_dark')
}
});
}
$(window).on('scroll resize', function () {
onScreen();
});
.nav {
position: fixed;
height: 10px;
}
.section_black {
background: black;
height: 300px;
}
.section_white {
background: white;
height: 300px;
}
.ham_dark { background: black!important; }
#nav_ham {
width: 30px;
height: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav_ham span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #fff;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_ham span:nth-child(1) {
top: 0px;
}
#nav_ham span:nth-child(2),
#nav_ham span:nth-child(3) {
top: 8px;
}
#nav_ham span:nth-child(4) {
top: 16px;
}
#nav_ham.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_ham.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_ham.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_ham.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div id="nav_ham" onclick="openNav()">
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span></div>
</div>
<div class="section_black">
BLACK
</div>
<div class="section_white">
WHITE
</div>
<div class="section_black">
BLACK
</div>
<div class="section_white">
WHITE
</div>
<div class="section_black">
BLACK
</div>
<div class="section_black">
BLACK
</div>
HTML:
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
JS:
$('.button').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
$('.element').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
http://jsfiddle.net/e4p98cwb/1/
When you hover on the black element the blue one enters the screen. After that if you hover for a sec on empty space the blue one starts to escape the screen, but if you hover fast on the empty space that it occupied before two things might happen:
1. The blue one returns fully shown on screen
or
2. Jumps once or twice and proceeds to leave the screen
The same happens on hover and mouseover events as well. Why is this happening and is there a way around this behavior ?
The easiest way to get around any issues with JS is to just let CSS take care of it. If you add this to the :hover state it will work:
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
See below for an implementation. This saves you a ton of JS as well.
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
-webkit-transform: translateX(630px);
transform: translateX(630px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
Update
The reason this is happening is because the element itself is still occupying the same space. This has to do with translation not actually moving the element, but transforming it. Once you move your cursor off any of the activatable elements, it will retract, but as it's animating it still occupies that same space, making it possible to hover on that space and retrigger the animation. I believe it's because this transform is only fully applied after completing the animation. Let's test this theory:
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
right: -100%;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
right: 0;
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
In this one we are simply using absolute positioning and the issue goes away, meaning that the tranform is actually causing the element to still occupy the same space. Until animation concludes.
With the reference from this Rotate image with onclick , I am trying to apply a css3 transition to a div, when the div element is clicked. The demo is here Everything is working perfect.
HTML
<div class="testRotate">Test rotate</div>
CSS
.testRotate{
width: 300px;
height: 50px;
border: 1px solid black;
padding: 20px;
margin: 0px auto;
margin-top: 50px;
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.testRotate.rotate{
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
JS
$(function(){
$("div").click( function(){
$(this).addClass("rotate");
setTimeout(function(){$("div").removeClass("rotate");}, 1500);
});
});
In this example, when onclicking the div, rotate class will be applied to it, so it will rotate for 360 degree, as defined in css. After sometimes we are removing the rotate class, so again the div is rotating back to its original position.
Now what i need is, when it clicked the element is has to rotate for 360 degree, but it should not suppose to rotate back once the rotate class got removed from it.
You can add a new class for transition and remove rotate as well as the class for transition.
$(function(){
$("div").click( function(){
$(this).addClass("testRotate rotate");
setTimeout(function(){$("div").removeClass("testRotate rotate");}, 1500);
});
});
.test {
width: 300px;
height: 50px;
border: 1px solid black;
padding: 20px;
margin: 0px auto;
margin-top: 50px;
}
.testRotate{
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.testRotate.rotate{
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test testRotate">Test rotate</div>
Fiddle Demo
Fiddle
$("div").click(function() {
if ( $(this).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(360deg)");
} else {
$(this).css("transform","");
}
});