While trying to describe it, I think it would be easiest to simply show the code.
<div class="cdm-animated-card">
<div class="cardTitle">
<h5 class="cardHeader">Collection Title</h5>
</div>
<img class="cardImage" src="collection/thumbnail.jpg" alt="alt text">
<div class="cardDescriptionDiv">
<div class="cardDescriptionText">
<a class="cardLink" href="link/to/collection">this is my clickable description</a>
</div>
</div>
</div>
Obstacle 1: Get the description div to "fade in" on hover. Here's my CSS for that, minus some stuff for the header and other non-relevant parts.
.cardsWrapper {
display: flex;
flex-wrap: wrap;
margin: 0px 10px 10px 10px;
justify-content: center;
}
.cdm-animated-card {
position: relative;
display: flex;
overflow: hidden;
/*other css*/
}
.cardDescriptionText a {
text-decoration: none;
color: #E6AA3C;
font-weight: 400;
padding: 5px;
font-size: 18px;
}
.cdm-animated-card .cardDescriptionDiv {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.cdm-animated-card .cardDescriptionText {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
width: 75%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.cdm-animated-card:hover .cardDescriptionDiv, .cdm-animated-card.active .cardDescriptionDiv {
opacity: 1;
}
Now when I hover over these cards, the description div fades in. Everything looks centered.. all is well.. but when I tab from elements higher up in the page, I can see [if I'm already hovering over a card], the description text gets that little blue border around it.
Problem is...
When I tab to the anchor [and I'm not already hovering] the animation never happens and basically, if I was unable to use a mouse, I'd never be able to see the description.
I've tried
.cdm-animated-card .cardLink:focus, .cdm-animated-card .cardDescriptionDiv:focus, .cdm-animated-card, .cardDescriptionText:focus {
opacity: 1;
}
basically the darts method... and also tried
.cdm-animated-card:focus .cardDescriptionDiv {
opacity: 1;
}
Because from what I understand, when you tab to an element, it is now "focused," I tried to say, 'when the description is focused via tab, change the opacity of the .cardDescriptionDiv element to 1 so that I can see it.'
tldr: when tabbing to a child, I would like its parent to change opacity.
--face palm--
I missed the ".parent:focus-within" pseudo-class.
.cardDescriptionDiv:focus-within {
opacity: 1;
}
Fixed
Related
css Of that Div:-
.PostBox {
position: fixed;
height: 60%;
width: 100%;
background-color: white;
bottom: 0;
border-radius: 10px;
border-top: 5px solid rgb(16, 150, 233);
padding: 20px;
display: inline-table;
animation: SlidUp 3s ease-out backwards;
}
Animaion Of Div
#keyframes SlidUp {
from {
visibility: hidden;
bottom: -60%;
opacity: 0;
}
to {
visibility: visible;
bottom: 0;
opacity: 1;
}
}
I Want to give this Animation Whenever a button is clicked, That Button just turns the visibility of this div to visible or hidden.
in short, I want to give animation when ever a button click or given animation whenever visibility change
You can do this in pure CSS/HTML without JavaScript if that is suitable for your particular use case.
The trick is to use an input of type checkbox. It needs to be before the PostBox and a sibling of PostBox.
Here's a simple example:
.PostBox {
position: fixed;
height: 60%;
width: 100%;
background-color: white;
bottom: 0;
border-radius: 10px;
border-top: 5px solid rgb(16, 150, 233);
padding: 20px;
display: inline-table;
}
input:checked~.PostBox {
animation: SlidUp 3s ease-out backwards;
}
#keyframes SlidUp {
from {
visibility: hidden;
bottom: -60%;
opacity: 0;
}
to {
visibility: visible;
bottom: 0;
opacity: 1;
}
}
<label>Click me </label><input type="checkbox">
<div class="PostBox">I am the div that is going to slide up</div>
Obviously you'll want to refine things a bit - for example do you want the div to be there from the start? But that's a different question.
I make a lightbox, but I have a little problem.
I can close the lightbox when I click on the X button, but I want to close the lightbox when I click outside the box too.
And the second isuee, is when I have on open lightbox and I click on another. The first don't close and then, I have two lightbox opened.
Any idea guys?
Thanks for all :)
$(document).ready(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
});
.full_section_inner { z-index: auto; }
.link { width: 100% height: auto; position: absolute; cursor: pointer; }
.link:hover { text-decoration: underline; }
#link-text { width: 100%; position: absolute; bottom: 0px; font-size: 20px; line-height: 22px; letter-spacing: 0px; }
.status { position: absolute; top: 0; left: -100vw; }
.status:checked ~ .content { -webkit-transform: none; transform: none; }
.status:checked ~ .backdrop { bottom: 0; opacity: 1; z-index: 1; transition: 0.3s opacity ease-in-out; }
.lightbox { position: fixed; right: 0; left: 0; height: 0; padding: 0; z-index: 100; top: 20%; }
.lightbox .content { display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 2; max-width: 550px; max-height: 80vh; margin: 20px auto; padding: 25px; background: #fff; -webkit-transform: translateY(-200%); transform: translateY(-200%); transition: 0.3s -webkit-transform ease-in-out; transition: 0.3s transform ease-in-out; transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out; border: 3px solid; }
.lightbox .header-lightbox { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding-bottom: 15px; }
.lightbox .header-lightbox h2 { margin: 0; font-size: 28px; line-height: 30px; }
.button { font-size: 30px; }
.button:hover { cursor: pointer; }
.text-lightbox { font-family: sans-serif; font-size: 16px; line-height: 20px; color: #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="link" for="lightbox-1">
<h2 id="link-text">Ona Bros</h2>
</label>
<aside class="lightbox">
<input type="checkbox" class="status" id="lightbox-1" />
<article class="content">
<header class="header-lightbox">
<h2>Title</h2>
<label class="button" for="lightbox-1">X</label>
</header>
<main class="text-lightbox">
<p>Lorem ipsum dolor sit amet.</p>
</main>
</article>
</aside>
Without code samples it might be kind of hard to answer, but in theory, you could try something like this:
I can close the lightbox when I click on the X button, but I want to close the lightbox when I click outside the box too.
I would try to have a light grey, transparent background come up as well covering the whole screen, and on click of that, it can close the lightbox
And the second isuee, is when I have on open lightbox and I click on another. The first don't close and then, I have two lightbox opened.
I would have some variable at a higher level as a sort of control for the lightbox. If you see it is true, you can either prevent the second lightbox from opening, or you can close the first one and open the second.
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
I am using the mixitup library to create a sortable grid. I have an overlaying grid item (.image-over) on top of individual grid items (.mix). When hovering over the grid item the div in the background (with a background image) gets blurred (.mix) and the displayed text is hidden (h1). In the overlaying div a new text is displayed (p.descfirst). When I hover over the new text inside the text reappears (h1). Any suggestions on how to avoid this?
.mix,
.gap {
display: inline-block;
vertical-align: top;
}
.mix {
background: #fff;
margin-bottom: 1rem;
position: relative;
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
z-index: -1;
}
.image-over:hover .mix {
position: relative;
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .1s ease-in-out;
}
.image-over {
display: inline-block;
position: relative;
top: 0;
z-index: 600;
background: transparent;
}
.mix:before {
content: '';
display: inline-block;
padding-top: 100%;
}
.mix h1 {
font-weight: 1600;
font-size: 500em;
color: #fff;
position: absolute;
z-index: 2;
top: 0;
margin: 0 auto;
padding: 5px;
background: rgba(0, 0, 0, 0.3);
}
.mix:hover h1 {
display: none;
}
.image-over:hover>p.descfirst {
position: absolute;
top: 40px;
left: 40px;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 1;
transition: .2s ease-in-out;
line-height: 25px;
margin: 0;
}
<div class="container">
<a href="./show.html">
<div class="image-over">
<p class="descfirst">Progressive</p>
<div class="mix pink large square" style="background: url('./img/night.jpg')">
<h1>3 | Test</h1>
</div>
</div>
</a>
</div>
Update
As the run snippet example is not really working here are some screenshots to demonstrate the problem.
i would use instead of css a little bit jquery with the mouseenter event.
https://api.jquery.com/mouseenter/
$( "#outer" ).mouseenter(function() {
$( "#inner" ).doStuffHere();
});
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});