When I hover a div at the bottom, which only is shown a little bit, (div has width:100%;), I want this div to move up with a mouseovereffect, and the same time push the logo, which is in the center of the screen, upwards. I want to use jQuery, because nothing else works. When the mouse is off the div, I want the div to fall back down to hiding. They are two div's inside the body.
Here is parts of the html and css: code
I hope someone knows how to make a javascript to make this hover function where hovering a div moves another div, then goes back to normal.
Does this help
using the jquery animate you can animate the movement of divs easily..
<div id="box1"></div>
<div id="box2"></div>
<style type="text/css">
#box1
{
width: 100px;
height: 100px;
background-color: red;
}
#box2
{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 10px;
}
</style>
<script type="text/javascript">
$("#box1").hover(function(){
//alert("hover");
$("#box2").animate({marginLeft: "200"});
});
$("#box1").mouseleave(function(){
$("#box2").animate({marginLeft: "0"});
});
</script>
There are few changes which need to be made in your code,
1) You have given class boks1 in jquery , but such class does not exist in your code.
2)you can combine both mouseover and mouseout in hover function itself.
Jquery
$(document).ready(function () {
$(".box1").hover(function () { // on hover
$(".box").css("margin-top", "-20px");
},function() {//on mouseout
$(".box").css("margin-top", "20px");
});
});
Something like this should work (if I understand your question).
I only changed the jQuery and one line of the CSS (the last line in .box was changed to transition: background 0.4s 0.5s, margin 0.4s;).
$(document).ready(function () {
$(".textarea").hover(
function () {
$(this).height($(this).height() + 200);
$(".box").css("margin-top", "-200px");
},
function () {
$(this).height($(this).height() - 200);
$(".box").css("margin-top", "");
}
);
});
#charset "UTF-8";
/* CSS Document */
html {
background: url(bilder/backnormal.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
.textarea {
background: rgba(255,255,255,0.5);
width: 100%;
float: left;
position: relative;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.box1, .box2 {
color: #666;
height: 57%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
text-align: left;
padding-left: 350px;
transition: background-color 0.5s ease-in-out;
float: left;
}
.box1:hover, .box2:hover {
background: rgba(255,255,255,0.2);
transition: background-color 0.5s ease-in-out;
}
/*________*/
.box {
width: 300px;
height: 400px;
position: relative;
background: rgba(255,255,255,0);
display: inline-block;
float: left;
margin-top: 10%;
margin-bottom: 10%;
margin-left: 35%;
margin-right: 35%;
cursor: default;
text-align: center;
-webkit-transition: background 0.4s 0.5s;
transition: background 0.4s 0.5s, margin 0.4s;
}
.box:hover {
background: rgba(255,255,255,0.2);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.logo {
width: 90%;
padding-top: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="menu">
</div>
<div class="box">
<img src="bilder/logouten.png" class="logo" />
</div>
<div class="textarea">
<div class="box1">
<h1>hello</h1>
<p>textexttextextextextexttextextxtxtexetxtextextextetex</p>
</div>
<div class="box2">
<h1>hello again</h1>
<ul>
<li>textext</li>
<li>haethaethaethaefgae</li>
<li>wordswordswords</li>
</ul>
</div>
</div>
<footer>
</footer>
</body>
</html>
Here is my solution:
$(".textarea").hover(
function () {
$('.textarea, .box').stop().animate({top: '-200px'});
}, function (){
$('.textarea, .box').stop().animate({top: '0'});
});
see Fiddle
For your information: Your code did not work because of typo in your jQuery selectors. I also mentions that you are using float left a certain time that makes no sense because you overrule it with other styles.
I'm animating the top position because the margin will not do the right thing. When using margin the animation stops when there is no space.
I'm trigger the hover on the texarea becaus it covers the hole width. When using the .box itselfe then you will loose the focus during the hover effect. This will end up in a jumping effect.
I also us the stop function to clear the quehe otherwhise every hover event will be stored an triggerd (makes also an jumping effect)
So my snippet may give you an idea of how to achieve your needs.
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 !
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.
So I want this div to fade another div that has a black background at 0.5 opacity over it. But when i hover it ignores the image already in the div and fills a black then fades the other div. so it goes Image --> Solid black div --> then fades my second div.
https://jsfiddle.net/70e890e6/
HTML:
<div class="box1">
<div class="img_hover_effect"></div>
<img src="images/portfolio/charity.png" class="box1_img">
<img src="images/portfolio/charity/2.png" class="box1_img2">
</div>
CSS:
.img.img_hover_effect {
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
JQuery:
$(document).ready(function(){
$('.box1').on('mouseenter', function() {
$('.img_hover_effect').fadeIn(1000);
});
});
You can use jQuery hover like this :
$('.box1').hover(function() {
$('.hover').fadeIn(1000);
}, function(){
$('.hover').fadeOut(1000);
});
and some css changes :
.box1 {
position:relative;
height: 400px;
width: 350px;
margin: 0 auto;
margin-top: 100px;
float: left;
overflow: hidden;
}
.tree {
height: 100%;
width: auto;
display: block;
position: relative;
}
.hover {
position:absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
z-index: 10;
}
JSFIDDLE : https://jsfiddle.net/70e890e6/4/
You could use a CSS pseudo-class for the desired hover effect. I'd recommend applying the class directly to the images you wish to have the hover effect rather than overlaying with another div.
.hover-effect:hover{
background-color: #000000; //or whatever colour fade you are looking for
opacity: 0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
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>
I am completely lost here and need some mad help.
If you click here http://cdechmedia.com/WIP/
You will see three cards one form wow,LoL and wildstar.
As you can see by the background that it is an empty land.
What I am trying to do is whenever I hover over say the wow card the empty land will turn into another image.
I am at a loss of how to do this. Honestly I don't care if it's just with CSS , Javascript, or whatever as long and I can make it happen.
Here is the CSS for the cards an background:
<div class="GMSpash">
<div class="CardsWrapper">
<a href="#">
<div class="WoWCard"></div></a>
<div class="LoLCard"></div>
<div class="WSCard"></div>
</div>
</div>
And here is the CSS:
.GMSpash {
height: 656px;
width: 100%;
background-repeat: no-repeat;
background-position: center top;
background-image: url(images/GMSplashBG.jpg);
}
.LoLSplash {
height: 656px;
width: 100%;
background-repeat: no-repeat;
background-position: center top;
background-image: url(images/WSSplashBG.jpg);
}
.CardsWrapper {
height: 348px;
width: 719px;
margin-top: 450px;
margin-right: 0px;
margin-bottom: 0px;
position: absolute;
margin-left: -359.5px;
left: 50%;
}
.WoWCard{
background-image: url(images/WoWcard.png);
background-repeat: no-repeat;
float: left;
height: 348px;
width: 237px;
margin-top: 5px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
}
.WoWCard:hover {
background-image: url(images/WoWcardH.png);
margin-top: 0px;
}
.LoLCard {
background-image: url(images/LoLcard.png);
background-repeat: no-repeat;
float: left;
height: 348px;
width: 237px;
margin-top: 5px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
}
.LoLCard:hover {
background-image: url(images/LoLcardH.png);
margin-top: 0px;
}
.WSCard {
background-image: url(images/WScard.png);
background-repeat: no-repeat;
float: left;
height: 348px;
width: 237px;
margin-top: 5px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
}
.WSCard:hover {
background-image: url(images/WScardH.png);
margin-top: 0px;
}
Now as you can see there is a class that says .LoLSplash so when I hover over the league card it will turn the GMSpash to LoLSplash.
I have tried the #a:hover + #b and #a:hover ~ #b but for some reason it isn't working for me and I'm truly at a loss.
If you change your <div class="WoWCard"></div> to add an onmousemove and an onmouseleave like <div class="WoWCard" onmousemove='setBackgroundWOW()' onmouseleave='setBackgroundDefault()'></div>, and give your div <div class="GMSpash"> an id like <div class="GMSpash" id='gmspash'>then it should be easy to set the background with a simple javascript function:
<script>
function setBackgroundWOW(){
document.getElementById("gmspash").style.backgroundImage = "url('wow_image_url')";
}
function setBackgroundDefault(){
document.getElementById("gmspash").style.backgroundImage = "url('images/GMSplashBG.jpg')";
}
</script>
Good luck!
Looks like you want something like this.
$(".CardsWrapper > a").mouseover(function() {
var $this = $(this);
if ($this.children.hassClass("WoWCard")) {
$(".CardsWrapper").parent().removeClass().addClass("WoWSplash");
}
else if ($this.children.hassClass("LoLCard")) {
$(".CardsWrapper").parent().removeClass().addClass("LoLSplash");
}
else if ($this.children.hassClass("WSCard")) {
$(".CardsWrapper").parent().removeClass().addClass("WSSplash");
}
});
Just set an "onmouseover" and "onmouseout" for the specific card like this:
<div id="LoLCard" class="LoLCard" onmouseover="changeLoLBackground()" onmouseout="resetLoLBackground()"></div>
and in JS:
function changeLoLBackground() {
document.getElementById("LoLCard").style.backgroundImage = 'url(URLofYourNewImage)';
}
function resetLoLBackground() {
document.getElementById("LoLCard").style.backgroundImage = 'url(URLofYourOrgImage)';
}
If you meant the background image of the website replace
document.getElementById("LoLCard")
with the id of your background div.