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();
});
Related
I'm trying to create a "bubble" which gets bigger in order to change its parent color with a nice animation. I like my approach, but I only need to put it inside the parent div.
This is what I have:
HTML
<html>
<body>
<div class="nav-menu" style="top: -64px;">
<div class="test"></div>
<div class="brand" onclick="test();">
<h1>App</h1>
</div>
<ul class="menu-list">
<li class="menu-item">Item</li>
</ul>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
* {
margin: 0;
padding: 0;
}
.nav-menu {
z-index: 1000;
padding: 0 16px;
display: flex;
justify-content: space-between;
background-color: #B67171;
color: white;
position: fixed;
width: 100%;
transition: background-color .5s, top .2s;
}
.test {
background-color: blue;
position: absolute;
border-radius: 50%;
z-index: -1;
width: 32px;
height: 32px;
left: 50%;
top: 50%;
transform: scale(0) translate(-50%, -50%);
transform-origin: top left;
transition: transform .25s;
}
.nav-menu .brand h1 {
margin: 0;
padding: 0;
line-height: 64px;
font-family: 'Satisfy', cursive;
}
.nav-menu .menu-list {
list-style: none;
margin: 0;
}
.nav-menu .menu-list a {
display: inline-block;
margin: 0;
padding: 0 16px;
line-height: 64px;
font-size: 21px;
vertical-align: middle;
transition: background-color .2s;
color: white;
text-decoration: none;
}
.nav-menu .menu-list a:hover {
background-color: #D8C292;
}
(And a .js just for testing)
let navMenu = document.getElementsByClassName("nav-menu")[0];
window.addEventListener('load', function (e) { navMenu.style.top = "0"; });
var showing = false;
function test () {
document.getElementsByClassName("test")[0].style = "transform: scale(" + (showing ? 0 : 4) + ") translate(-50%, -50%);";
showing = !showing;
}
Here you have a demo in which you can press the "App" text and it would scale the "bubble" just a little bit. I want to remove the following stuff:
Can anybody give me a hint? However if you know any better solution for this "feature", I will appreciate it.
Thank you in advance!
Adding overflow:hidden property to your navigation div would work. Try this code.
.nav-menu {
z-index: 1000;
padding: 0 16px;
display: flex;
justify-content: space-between;
background-color: #B67171;
color: white;
position: fixed;
width: 100%;
transition: background-color .5s, top .2s;
overflow: hidden;
}
Add to .navmenu property overflow
DOC: overflow
nav-menu {
...
overflow: hidden;
}
Simply add overflow: hidden; to your div with class nav-menu.
Here is your edited example: https://jsfiddle.net/4r1n2cux/2/
use overflow: hidden; in style of first <div>
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
I was wondering if there is an easy way of creating the animation, similar to Whatsapp one.
When you are on chat screen and go back to chat list, an active element is highlighted gray for a moment (so it shows which chat was opened before).
Is there not complicated way of doing this in JS or CSS? Hopefully most of you guys know what I'm talking about. Unfortunately can't find any examples in the net...
Here is a example of how you could achieve the effect, but with no more details on your project i can't do more.
var li = $('li');
var messages = $('.messages');
var close = $('.close');
li.on('click', function(){
$(this).addClass('active');
messages.addClass('active');
});
close.on('click', function(){
messages.removeClass('active');
li.removeClass('active');
});
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.info {
margin-bottom: 20px;
padding-left: 15px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: #ececec;
padding: 10px;
border-bottom: 2px solid black;
cursor: pointer;
transition: background .2s .3s;
}
li.active {
background: gray;
transition: background .3s;
}
.messages {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
transition: transform .3s;
transform: translateX(100%);
padding: 20px;
}
.messages.active {
transform: translateX(0);
}
.close {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
position: absolute;
right: 70px;
top: 30px;
background: black;
color: white;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
.close:hover {
opacity: .7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="info" >Click on a person, and close the discussion by clicking on the "X" to see the effect.</p>
<ul>
<li>Bob</li>
<li>Steven</li>
<li>Marie</li>
<li>Marc</li>
<li>Jack</li>
<li>Edouardo</li>
</ul>
<div class="messages">
A lot of messages bla bla ...
...
<span class="close">X</span>
</div>
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.
I have a few images where I'd like half borders to the top right corner and to the bottom left corner. The problems I am running into are:
problem 1: I have managed to cut of borders at all four corners, but can't cut of top left and bottom right. code below (I'm using this fiddle provided by KillaCam, and experimented a little, with the result that all four corners appear at first and then three of them disappears! : http://jsfiddle.net/3jo5btxd/
#div1 {
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;transition: border 2000ms ease 0s;
}
#div2 {
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
}
Problem 2 I already have a panel that has a link vertically centered using the css table method, which is also visible on hover. When I combine the panel's code with the corner borders, my vertical centering goes out of whack! I guess that is happening because of the extra div I am using for borders, but I haven't managed to make the corners with :before (doesn't work on hover). HTML and css below and the also the image showing what I want to make:
<ul class="img-list">
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/adventure/">
<img src="something.jpg"/>
<span class="text-content">
<span>Adventure</span>
</span>
</a>
</li>
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/beach-2/">
<img src="something2.jpg" />
<span class="text-content">
<span>Beach</span>
</span>
</a>
</li> </ul>
CSS:
/*css for the categories on home page*/
.img-list{margin:0;padding:0; list-style:none}
ul.img-list li {
display: inline-block;
height: 20em;
margin: 0;
position: relative;
}
.category_lists.one-third{width:33%; margin-left:0;}
.category_lists img{width:100%; height:auto;}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(38,196,83,0.7);
color: white;
cursor: pointer;
display: table;
height: 7em;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
font-size:42px;
text-transform:uppercase;
font-family: 'Raleway', sans-serif; font-weight:300
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
And the image showing what I want to make: http://tinypic.com/r/2gy5zk4/8 .
If I have to use javascript, I will, but I am not very good at it, so counting on css to make it work. Thanks a lot for any help.
Here's one solution: http://jsfiddle.net/f7u6yxLq/.
HTML:
<div></div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
div {
position: relative;
display: table;
width: 200px;
height: 100px;
background: url("http://placehold.it/200x100")
no-repeat
top left;
}
div:before,
div:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
border: solid white;
border-width: 2px 2px 0 0;
display: none;
}
div:before {
right: 5px;
top: 5px;
}
div:after {
border-width: 0 0 2px 2px;
bottom: 5px;
left: 5px;
}
div:hover:after,
div:hover:before {
display: block;
}
Solution for problem #1: http://jsfiddle.net/3jo5btxd/2/
.div2:before, .div2:after {width:9px; height:9px; position: absolute;background:#fff; content:'';}
.div2:before {top:0; left:0;}
.div2:after {bottom:0; right:0; }