Develop Reference

Clicking trough a visibility:hidden element

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 !

Hide an element using jquery/css

I'm trying to hide the sidebar to a negative right (-205px) so I can get an effect where the content wrapper and sidebar move at the same time.
The problem is that the sidebar is still being shown on the right? I though I could hide it sending it "outside" the web page. I can't simply use display block none and block on the sidebar because it will not make a smooth animation
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('right', '-205px');
$('.content-wrapper').css('margin-right', "0");
$('.full-page-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('right', '0');
$('.content-wrapper').css('margin-right', "205px");
$('.full-page-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
transition: left 1s ease;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-right" class="visible">
<ul class="sidebarList">
<li>
</li>
</ul>
</div>
<div class="content-wrapper">
<button id="toggle-right-sidebar">CLICK ME</button>
</div>

add overflow-x:hidden to your outer container

You need to transition the right CSS property on the sidebar, because that's the one you're changing.
#sidebar-right {
transition: right 1s ease;
}

Adding correct type of transition with equal time for both #sidebar-right and .content-wrapper would solve your issue. Try this code.
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
background: red;
transition: all 0.7s ease;
}

#sidebar-right {
transition: all 1s ease;
}
'all' enable to use transition on all property

CSS/JS Resize figure to fit image size

I experimented a littlebit with transitions and wanted to show a caption for an image on :hover. This is what I got right now:
(I tried to resize the figure itself with the sizes of the image)
//Resize figure to image size
$(document).ready(function() {
$("figure>img").load(function() {
$(this).parent().width($(this).width());
});
});
figure {
display: table;
position: relative;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 10px 20px;
opacity: 0;
/* unvisible to fade in later */
bottom: 0;
left: 0;
display: none;
/* unvisible to fade in later */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
/* visible */
left: 0;
display: inline-block;
/* visible */
}
.img-middle {
height: 60%;
width: 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<img class="img-middle" src="img/test.png" alt="" width="700" height="500"></img>
<figcaption>This is a cool caption</figcaption>
</figure>
The figure never was resized. The problem right now is that the figure somehow has a width of 100% and therefor the :hover effect also triggers somewhere next to the image. I don't want to set the size of the figure manually. And when I tried figure>img:hover figcaption { /* do stuff */ }(to trigger the caption fade in only on image hover) it somehow didn't worked anymore.
So because that dont worked for me, I tried to resize the parent according to its childrens size...

is this what you were going for?
figcaption {
position: absolute;
display: block;
background: rgba(0, 0, 0, 0.75);
color: white;
height: 100%;
overflow: hidden;
width: 0;
/* unvisible to fade in later */
top: 0;
left: 0;
/* unvisible to fade in later */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
text-overflow: ellipsis;
white-space: nowrap;
}
figure {
display: table;
position: relative;
overflow: hidden;
border: 1px solid;
/**
* only an example
*/
width: 500px;
height: 100px;
}
figure img {
display: block;
width: 100%%;
height: 100%;
}
figure > .image-container {
width: auto;
display: block;
width: 80%;
margin: 0 auto;
}
figure > .image-container:hover {
width: 100%;
}
figure > .image-container:hover figcaption {
padding: 10px 20px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<div class="image-container">
<img class="img-middle" src="http://lorempixel.com/400/200/" alt="" width="100%" />
<figcaption>This is a cool caption</figcaption>
</div>
</figure>

css opacity ease in out affecting other elements too

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

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

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

Move div when hovering another div with jquery

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.