Please note this is not a repeat question, i have looked into all possible questions in stackoverflow and i did not get an answer.
I am looking at the website http://riviera-black.cmsmasters.net/ and in this especially the section where it says "Recent Projects". When i hover over the image only the background <article> element changes in opacity but not the <figure> element inside. How is this done?
Please note i tried changing the opacity using jQuery for me it changes the opacity of all elements inside, for example in this case it changes opacity of <article> and <figure> element.
There are many ways to do this, perhaps the easiest is to use a wrapper element around the image with a padding, and then animate the background with CSS3 on :hover
<div class="image">
<img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg"/>
</div>
css
.image {
padding: 50px;
position: relative;
top: 100px;
left: 100px;
height: 200px;
width: 300px;
-webkit-transition: background 1s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.image:hover {
background: rgba(255,255,255,0.4);
}
.image img {
height: 200px;
width: 300px;
}
FIDDLE
They change opacity not in <article> element. They change pseudo element :before that IN <article> with CSS:
content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: .15;
that mean, that element places full width and height of parent <article> but not contains <article> children. :before and <figure> are in parallel.
They used a combination of the :before and :hover pseudo selectors. When someone hovers on the child element, the :before pseudo element's opacity is modified.
Example
HTML
<div class="parent">
<div class="child">Hover me!</div>
</div>
CSS
.parent { position: relative; }
.child:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
opacity: .15;
}
.child:hover:before { opacity: .5; }
Working example
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;
}
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.
I'm in a tricky situation -- I'm trying to build a sort of realistic flyer, with clickable paper strips at the bottom. Just for a visual reference, something like this: http://static.someecards.com/someecards/images/feed_assets/4d657f7fa4817.jpg
I built the body of the flyer with an empty div, and I absolutely positioned the "paper strips" at the bottom of this div. Then, since I'll want to add a "torn paper" border-image at the bottom of the flyer body, I gave the strips a negative z-index.
Then, in order to cover the torn-paper-border, I positioned an empty, transparent div on the top of them, with a solid-coloured pseudo element that will disappear once the CSS3 animation will be triggered (via JS).
<div class="flyer-body">
<div class="strip"></div> <!-- this will be animated via CSS3 -->
<div class="strip-wrapper"></div> <!-- this is a clone of the "strip" div, but transparent (made for z-index problems with animations). a click on this div will trigger the animation -->
</div><!-- end flyer-body -->
jsFiddle for reference: http://jsfiddle.net/XR7LT/
As you can see, I'm applying a fadeOut() effect to the pseudo element in order to disappear gently. The problem is, the fadeOut() only applies to the first pseudo element, while hiding the others without any effect.
Problem shows on both Chromium and FF browser, Ubuntu Linux 12.10.
Any ideas?
Thanks in advance.
Your CSS is not the same for all elements.
The transitions should not be in both .strappamiX and .strappamiX-wrap,
I removed them from wrap:
.strappami1 {
display: block;
width: 100px;
height: 250px;
background: red;
z-index: -23;
position: absolute;
bottom: -200px;
left: 103px;
transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-webkit-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
}
.strappami1-wrap {
display: block;
position: absolute;
width: 100px;
height: 250px;
bottom: -200px;
left: 103px;
background: transparent;
}
Created a fork of your fiddle here:
http://jsfiddle.net/sn6ZT/1/
I got here after Roise, but you should be able to simplify your solution significantly by leveraging parent child relationships and adding multiple classes.
http://jsfiddle.net/XR7LT/4/
When you have 5 elements that should all have the same behavior, use the same class for all of them, and apply the code to all of them. Then you can add some additional classes to move the additional pieces over a bit.
SIMPLER HTML
<section class="flyer">
<div class="strappami-wrap w0">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w1">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w2">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w3">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w4">
<div class="cover"></div>
<div class="strappami"></div>
</div>
</section>
SIMPLER CSS
.flyer {
display: block;
width: 900px;
height: 220px;
background: yellow;
margin: 0 auto;
position: relative;
}
.strappami {
display: block;
width: 100px;
height: 250px;
background: red;
z-index: -23;
position: absolute;
left: 0;
transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-webkit-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
}
.strappami-wrap {
display: block;
position: absolute;
width: 100px;
height: 250px;
background: transparent;
bottom: -200px;
left: 0px;
}
.strappami-wrap.w1 {
left: 110px
}
.strappami-wrap.w2 {
left: 220px
}
.strappami-wrap.w3 {
left: 330px
}
.strappami-wrap.w4 {
left: 440px
}
.strappami-wrap .cover {
content: '';
display: block;
position: absolute;
width: 100px;
height: 50px;
background: green;
top: 30px;
left: 0px;
}
.strapping {
bottom: -900px;
opacity: 1;
z-index: -200;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}
.strapping-alt {
bottom: -800px;
opacity: 1;
z-index: -200;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}
SIMPLER JS
$(document).ready(function() {
$(".strappami-wrap").on('click', function() {
var r = Math.floor(Math.random()*10);
if (r < 5){
$(this).find(".strappami").addClass('strapping');
} else {
$(this).find(".strappami").addClass('strapping-alt');
}
$(this).find(".cover").fadeOut();
});
});