I have implemented the peeking effect into my website.
Here it is http://jsfiddle.net/7yrWL/1/
Now this is working and peeks when ever I hover over the image, Now what I simply want is this effect work only if we scroll to this section. Means the container peeks out over scroll only but a click.
Any idea anyone?
Thank you
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
$(window).scroll(function() {
scrollEffect();
});
function scrollEffect() {
$('.main').each(function(i) {
if ($(this).position().top <= $(window).scrollTop()) {
$(this).addClass('effect');
}
});
}
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main.effect .peek, .main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
Add an .main.effect .peek class for main, which has the same effect as .main:hover .peek, and then add an effect class to each main div that enters the visible area in the scroll event.
Related
I've an image, and I'm making it transparent on click, so it reveals the background, Making the illusion of an overlay.
I'd like to also show some text in the center of the background, so it appears when the background reveals, how to do it?
Expected:
Codepen:
https://codepen.io/ogonzales/pen/yLJGzYr
Code:
$('.tricky').click(function(){
$('img').addClass("tricky_image");
});
UPDATE 1:
Codepen multiple images in grid
https://codepen.io/ogonzales/pen/qBNLLoW
This should work. If you have any questions, please let me know. You can also add a border if you want to match the reference image better.
$('.imageDiv').click(function(){
$('img').addClass("tricky_image");
$(".text").css("display", "inline");
});
.imageContainer {
position: relative;
text-align: center;
color: black;
max-width: 200px;
max-height: 200px;
}
.tricky_image {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0.5;
filter: alpha(opacity=20);
}
.text {
display: none;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="imageContainer">
<div class='imageDiv' id = 'test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
Updated answer:
The key thing here is remembering how the DOM works.
you had $('.imageDiv').click(function() {... which will only allow you to find the children of the image div, which the text class is not part of. I switched it to ('.imageContainer') which can traverse the DOM properly to find text as it is a child of imageContainer. Also $(this).find(".text").toggleClass("display-inline"); does not work because display-inline is not a class. I created a new class called addText which now hold the properties text had before where text now serves to hide the text until needed. Let me know in the comments if this works for you.
$('.imageContainer').click(function() {
$(this).find('img').toggleClass("tricky_image");
$(this).find('.text').toggleClass("addText");
});
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: center;
grid-gap: 15px;
}
.flip-card {
border-style: hidden;
background-color: transparent;
width: 120px;
height: 120px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #222e36ef;
color: white;
transform: rotateY(180deg);
}
/* background overlay - text */
.imageContainer {
position: relative;
text-align: center;
color: black;
max-width: 200px;
max-height: 200px;
}
.tricky_image {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0.5;
filter: alpha(opacity=20);
}
.text {
display: none;
}
.addText{
display: inline;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
}
#media(max-width: 768px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-8">
<section id="team">
<div class="container">
<div class="grid">
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
</div>
</div>
</section>
</div>
I am trying to show div on mouseover, but it's flickering, how do I show/hide without any jerk and smooth with the transition?
I have tried the fade in/out using jquery as well but still blinking.
Here is the code
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
}
.front {
width: 100%;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
}
.front:hover + .back {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
</div>
It flickers because every time .back becomes visible, hover on .front is no longer valid. To solve for this you can set visibility of .back as visible on .back:hover which can be done by using the same css style for .back:hover as for .front:hover + .back
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
}
.front {
width: 100%;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
}
.front:hover + .back,
.back:hover {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
</div>
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
}
.front {
width: 100%;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
}
.col:hover > .back {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
</div>
.col:hover > .back {
opacity: 1;
visibility: visible;
}
I have a simple solution.
Change .front:hover + .back => .col:hover > .back.
The problem is that when you hover .front div the .back div appears, so now you're hovering the .back div not the .front so it disappears again, and the loop continues.
To fix this, add the hover effect to the .back div too.
Add transition to .back for smooth effect.
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
}
.front {
width: 100%;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
transition: 0.2s ease;
}
.front:hover + .back, .back:hover {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
</div>
What if you put .back element inside .col element, move .front element styles to .col element and add transition to .col element? I think it's a better solution in view of browsers support.
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
transition: all 0.2s;
}
.col:hover .back {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
This is front part
<div class="back">This is back part</div>
</div>
<div class="col">
This is front part
<div class="back">This is back part</div>
</div>
<div class="col">
This is front part
<div class="back">This is back part</div>
</div>
</div>
The main problem is that you have not been able to tell who really "shoots" the "animation".
Both front and back are at the same level, so it is not possible to do it from that level, but if you shoot it through the parent element, it should work.
The approach would be as follows:
.col:hover .back {
opacity: 1;
visibility: visible;
}
I made a loading screen on my personal website. I found that the footer will cover my loading screen when I go into the website.
I want my loading screen can cover the entire screen when I go into the website. How can I do that?
This is my code, css and js.
<footer class="cfooter navbar-fixed-bottom text-center" id="cfooter">
<div class="container">
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">Powered by User</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
</div>
</footer>
#cfooter {
display: block;
border: 1px solid 000000;
height: 100px;
text-align: center;
background-color: #000000;
color: #fff;
font-size: 15px;
}
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: white;
}
img.load_screen {
z-index: 9999999;
position: fixed;
left: 50%;
top: 50%;
margin: -27px 0 0 -95px; /* -image-height/2 0 0 -image-width/2 */
background: white;
}
$(function() {
$("div.load_screen").fadeIn("slow")
setTimeout(function() {
$("div.load_screen").fadeOut("slow")
}, 3000);
})
add z-index: 999; to div.load_screen
Add #cfooter {z-index: 1}
and add top and left 0.
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: red;
top: 0;
left:0;
}
Here is the working example. I have added red background just to test it:
https://jsfiddle.net/o7wd4mfp/4/
I am trying to use z-index to overlap in this scenario, but I cannot achieve the results I am looking for.
Here is my code: https://jsfiddle.net/mx0zdpvm/.
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -100px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>
This is the result I am trying to achieve:
A CSS solution is preferred.
First change:
#redStripes{
position: relative;
top:60px;
right:280px;
z-index: 2;
}
If you want to overlap elements, divs, you need to specify position absolute or relative to something, otherwise the z-index will not work.
https://jsfiddle.net/scorpio777/mx0zdpvm/3/
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: relative;
top:50px;
right:280px;
z-index: 2;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -150px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>
You cannot overlap elements if you don't set the position to absolute or relative.
This will sort the overlapping out. I set the position to relative and a z-index of 1 to the blue triangle, and 2 to the red strips, then adjusted the positioning with top and right. I will leave you to sort out the rest :)
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: relative;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
right: 0px;
top:-100px;
z-index:1;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
z-index:2;
left: -100px;
}
I have a header element which is fixed. Within in the element, there is a dropdown nav that is positioned absolute under the header. I implemented the dropdown function to make it appear, however, is there a possibility to scroll the nav while the header remains fixed? I found out the nav gets rather big, too big to not to scroll.
My current progress:
window.onload = function() {
var menuBtn = document.getElementById("menu-icon"),
navbar = document.getElementById("navbar"),
header = document.getElementById("header");
menuBtn.addEventListener('click', toggleMenu);
function toggleMenu(){
menuBtn.classList.toggle("active");
navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
}
}
header {
background:#ddd;
position: fixed;
height: 45px;
top: 0;
width: 100vw;
z-index: 500;
}
nav{
overflow: auto;
background: #fff;
position: absolute;
left: 0;
top: 45px;
transition: all 0.3s;
max-height: 0;
overflow: hidden;
}
#menu-icon {
display: block;
float: right;
height: 100%;
width: 22px;
margin-right: 7%;
background: black;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#menu-icon.active{
background: blue;
}
.item{
display: inline-flex;
width: 86vw;
padding: 8px 0;
margin: 0 7%;
border-top: 1px solid #58595b;
}
.item a{
color: #58595b;
display: inline-block;
width: 85%;
transition: all 0.3s;
}
<header id="header">
<div id="menu-icon"></div>
<nav id="navbar">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</nav>
</header>
Just add this CSS
#navbar{
position: relative;
overflow-y: auto;
}
You can Add in this css file
#navbar{
position: relative;
overflow-y: scroll;
height:200px;
}
window.onload = function() {
var menuBtn = document.getElementById("menu-icon"),
navbar = document.getElementById("navbar"),
header = document.getElementById("header");
menuBtn.addEventListener('click', toggleMenu);
function toggleMenu(){
menuBtn.classList.toggle("active");
navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
}
}
header {
background:#ddd;
position: fixed;
height: 45px;
top: 0;
width: 100vw;
z-index: 500;
}
#navbar{
position: relative;
overflow-y: scroll;
height:200px;
}
nav{
overflow: auto;
background: #fff;
position: absolute;
left: 0;
top: 45px;
transition: all 0.3s;
max-height: 0;
overflow: hidden;
}
#menu-icon {
display: block;
float: right;
height: 100%;
width: 22px;
margin-right: 7%;
background: black;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#menu-icon.active{
background: blue;
}
.item{
display: inline-flex;
width: 86vw;
padding: 8px 0;
margin: 0 7%;
border-top: 1px solid #58595b;
}
.item a{
color: #58595b;
display: inline-block;
width: 85%;
transition: all 0.3s;
}
<header id="header">
<div id="menu-icon"></div>
<nav id="navbar">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</nav>
</header>