I need some help with a css issue. I'm actually trying to make an animated checked-button with a double animation effet. You can see what I'm aiming at here:
https://youtu.be/rMDGeAUQ0Wc
I'm working on the appearing of the button from the right side. I decided to use flexbox associated with a hover feature so I can make appear the button on hover, but it doesn't seem to work and I don't know why.
Here's the code:
.flexbox-container {
display: flex;
overflow: hidden;
justify-content: space-between;
}
.flexbox-3 {
display: none;
}
.flexbox-container: hover+flexbox-3 {
display: block;
}
<div class="flexbox-container">
<div class="flexbox-1">
<p>text</p>
</div>
<div class="flexbox-2">
<p>text</p>
</div>
<div class="flexbox-3">
<p>text</p>
</div>
</div>
Does anyone can help?
Cheers
try this
.flexbox-container:hover > .flexbox-3 {
display: block;
}
but I think that animation will not work due to display:none block. I would prefer you to write the code this way.
.flexbox-3 {
position: relative;
right: -30%;
transition: 0.5s;
}
.flexbox-container:hover > .flexbox-3 {
right: 0;
}
if you want to move .flexbox-2 try this CSS. I add tranform: translate
.flexbox-container {
display: flex;
overflow: hidden;
justify-content: space-between;
width: 300px;
border: 1px solid black;
}
.flexbox-3 {
position: relative;
opacity: 0;
right: -30%;
transition: 0.5s;
visibility: hidden;
}
.flexbox-2 {
transform: translateX(0);
transition: 0.5s;
}
.flexbox-container:hover .flexbox-3 {
right: 0;
opacity: 1;
visibility: visible;
}
.flexbox-container:hover .flexbox-2 {
transform: translateX(-30px);
}
There are some errors in your CSS
Try this
.flexbox-container:hover .flexbox-3 {
display: block
}
however the animation will not work here because animate does not work with the display property
Related
I have a container div with overflow: auto (this can't be removed) and within it there's another div that toggles between showing and hiding using an animation when a button is clicked. The problem is that when this div moves down it causes an overflow. Keep in mind that this div must be within the container.
Example of the problem
https://jsfiddle.net/wg3jzkd6/1/
The expected result:
Div moves down without causing overflow
#manuel can you move the absolute div inside the content div? if yes, try adding the overflow: hidden; on content div
document.getElementById('button').addEventListener('click', () => {
const absolute = document.getElementById('absolute-div')
const absoluteClass = absolute.getAttribute('class')
if(absoluteClass.includes('hidden'))
absolute.setAttribute('class', 'absolute-div shown')
else
absolute.setAttribute('class', 'absolute-div hidden')
})
#keyframes hide {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
#keyframes show {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.container {
position: relative;
overflow: auto;
border: 1px solid black;
height: 80vh;
width: 40vw;
margin: 0 auto;
padding: 1rem;
}
.content {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 100%;
background-color: green;
overflow:hidden;
}
.absolute-div {
background-color: blue;
min-height: 20%;
width: 100%;
position: absolute;
left: 0;
bottom:0;
display:inline;
}
.hidden {
animation: hide ease forwards 300ms;
}
.shown {
animation: show ease forwards 300ms;
}
<html>
<body>
<div id='container' class='container'>
<div class='content'>
<button id='button'>
SHOW/HIDE
</button>
<div id='absolute-div' class='absolute-div'>
Hello world
</div>
</div>
</div>
</body>
</html>
Hope this will solve the issue you are facing..
As far as I can understand your question, is that you have a container that has an extra overflow. Try using the overflow: hidden; property in your container div
Just change your overflow to hidden
document.getElementById('button').addEventListener('click', () => {
const absolute = document.getElementById('absolute-div')
const absoluteClass = absolute.getAttribute('class')
if(absoluteClass.includes('hidden'))
absolute.setAttribute('class', 'absolute-div shown')
else
absolute.setAttribute('class', 'absolute-div hidden')
})
#keyframes hide {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
#keyframes show {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.container {
position: relative;
overflow: hidden;
border: 1px solid black;
height: 80vh;
width: 40vw;
margin: 0 auto;
padding: 1rem;
}
.content {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 100%;
background-color: green;
}
.absolute-div {
background-color: blue;
min-height: 20%;
width: 100%;
position: absolute;
left: 0;
bottom:0;
}
.hidden {
animation: hide ease forwards 300ms;
}
.shown {
animation: show ease forwards 300ms;
}
<html>
<body>
<div id='container' class='container'>
<div class='content'>
<button id='button'>
SHOW/HIDE
</button>
</div>
<div id='absolute-div' class='absolute-div'>
Hello world
</div>
</div>
</body>
</html>
I do not quite understand, why overflow: auto cannot be changed. It works perfectly with the overflow attribute set to hidden.
If changing from auto invokes some kind of affect that is not explained here, I would kindly advise you to add this affect. But should there be such, it can probably be solved by putting this whole construct into another div container and isolating it, preventing any unwanted side effects.
I wanted to add a heading(bold) and a subheading(not bold) on all the images on a webpage when mouse hovers over it. I already have the effect where the image fades/changes color upon hovering. Following is the image: https://imgur.com/a/xLXSUkx
Here's the HTML code for it:
<div class="JA-linkWrap JA-Notprojects JA-NotObjects floatleft" style="width:300px;">
<a href="https://canadacouncil.ca/initiatives/venice-biennale"
class="JA-projectPageLink">
<img src="images/GRID/111%20jpeg%20grid.jpg" alt="" class="JA-
newsmediaImage">
<h2 class = "img_head"> The Octa. </h2>
<p class = "img_description"> Arch. </p>
</a>
</div>
This is the CSS for .JA-linkWrap:
.JA-linkWrap {
float: left;
margin: 12px;
}
More CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
.JA-linkWrap img:hover {
-webkit-filter: brightness(90%);
}
.img_head{
position: absolute;
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity.2s, visibility .2s;
}
.img_description{
position:inherit;
color:#000;
visibility: hidden;
opacity: 0;
transition: opacity.2s, visibility .2s;
}
.JA-linkWrap:hover .img_description{
visibility: visible;
opacity: 1;
}
.JA-linkWrap:hover .img_head{
visibility: visible;
opacity: 1;
}
Here's the outcome of my attempt when I hover the mouse over the image: https://imgur.com/a/Fkuf0eE As you can see the heading and description of the image are both under the image. I want them to be in the center of the image. Please be specific, I am new to this.
You should add a wrapper to the title elements, and then set the size of the wrapper like the box of the image. Then use flexbox to vertically align titles inside the wrapper. Also, remove inline styles for width: 300px
.JA-linkWrap {
float: left;
margin: 12px;
position: relative;
}
* {
margin: 0;
padding: 0;
border: 0;
}
.JA-linkWrap:hover img {
-webkit-filter: brightness(90%);
}
.img_head{
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity.2s, visibility .2s;
}
.img_description{
color:#000;
visibility: hidden;
opacity: 0;
transition: opacity.2s, visibility .2s;
}
.JA-linkWrap:hover .img_description, .JA-linkWrap:hover .img_head {
visibility: visible;
opacity: 1;
}
.title-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
}
.title-wrapper .img_head, .title-wrapper .img_description {
background-color: white;
}
<div class="JA-linkWrap JA-Notprojects JA-NotObjects floatleft">
<a href="https://canadacouncil.ca/initiatives/venice-biennale"
class="JA-projectPageLink">
<img src="https://picsum.photos/id/237/500/300" alt="" class="JA-
newsmediaImage">
<div class="title-wrapper">
<h2 class = "img_head"> The Octa. </h2>
<p class = "img_description"> Arch. </p>
</div>
</a>
</div>
I have a responsive navigation which should display a menu when a button is clicked. When it is clicked, the ul containing the navigation list is added a class (.show-nav) to by jQuery/JS. When this happens a CSS-rule for .show-nav changes the opacity and top-values, so that the ul comes down. I tried adding a transition to this, but the ul refuses to respond to that.
On the other hand, I also have a header-element, which changes the background-color when a certain y scroll value is reached (also done by JS). This works in the exacly same way as the latter, by adding a class to the header and having the CSS applying a background-color.
function toggleClass(jqo, c) {
var o = $(jqo);
if (!o.hasClass(c)) {
o.addClass(c);
} else {
o.removeClass(c);
}
}
header {
width: 100%;
text-align: right;
position: fixed;
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.3s;
}
header .mobile-list {
display: none;
}
.mobile-header .mobile-list {
width: 100%;
height: 100%;
padding-top: 90px;
right: 0;
top: -50%;
opacity: 0.5;
position: fixed;
z-index: -1;
background-color: #005163;
transition: top 2s, opacity 2s;
}
.show-nav .mobile-list {
display: block;
top: 0;
opacity: 1;
}
.compact {
background-color: #005163;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<button class="hamburger" onclick="toggleClass('.hamburger', 'is-active'); toggleClass('header', 'show-nav')" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<ul class="mobile-list">
<li>PHYSICS</li>
<li>CHEMISTRY</li>
<li>BIOLOGY</li>
<li>MATH</li>
<li>TOOLS</li>
</ul>
</nav>
</header>
.compact is assigned by JS, just like .show-nav. But header is responding to the transition and the ul is not!
Note that .mobile-header is active in every case, so that's no concern.
I also concluded that the ul does respond to all other CSS, just not the transition. I've looked at other websites (dashlane.com) that have the same kind of navigation system and tried to copy it's structure, but without much avail. How can I achieve the ul having a transition and why does my header react where my ul doesn't?
Thanks in advance.
EDIT:
Added transition line in CSS under .mobile-header .mobile-list.
EDIT: Added jQuery code.
You have to know that the css display property cannot be animated,
So you have to try another solution, best thing at the meanwhile is the visibility and opacity properties.
just remove the display: none / display: block and replace it with:
/*Element style when it's hidden*/
.elementStyle {
opacity: 0;
visibility: hidden;
}
/*Element style when it's visible*/
.elementStyle {
opacity: 1;
visibility: visible;
}
function toggleClass(jqo, c) {
var o = $(jqo);
if (!o.hasClass(c)) {
o.addClass(c);
} else {
o.removeClass(c);
}
}
header {
width: 100%;
text-align: right;
position: fixed;
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.3s;
}
.mobile-header .mobile-list {
width: 100%;
height: 100%;
padding-top: 90px;
right: 0;
top: -50%;
opacity: 0.5;
position: fixed;
z-index: -1;
background-color: #005163;
transition: top 2s, opacity 2s;
}
header .mobile-list {
visibility: hidden;
transition: 1s;
/*Add whatever transition you want*/
opacity: 0;
display: block;
}
.show-nav .mobile-list {
top: 0;
opacity: 1;
visibility: visible;
}
.compact {
background-color: #005163;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<button class="hamburger" onclick="toggleClass('.hamburger', 'is-active'); toggleClass('header', 'show-nav')" type="button">Test Button
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<ul class="mobile-list">
<li>PHYSICS</li>
<li>CHEMISTRY</li>
<li>BIOLOGY</li>
<li>MATH</li>
<li>TOOLS</li>
</ul>
</nav>
</header>
I have a product div and whenever I hover over it, it rotated and shows the other side, it works and all but the thing is it becomes smaller, here's an idea of what it looks like here.
.product {
transform: scale(1.5);
transition: transform 1s cubic-bezier(.1, -.60, .50, 1.2);
perspective: 700px;
transform-style: preserve-3d;
}
.inner img {
height: 65px;
width: 65px;
}
.product:hover {
transform: rotateY(-180deg);
}
.product:hover .side-b {
transform: rotateY(180deg);
display: block;
}
.product:hover .side-a {
visibility: hidden;
}
.product-desc {
color: #fff;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding-left: 20px;
padding-right: 20px;
display: flex;
/* For centering text inside .photo-overlay */
flex-direction: column;
justify-content: center;
align-items: center;
display: none;
line-height: 0;
}
<li>
<div class="product">
<div style="height: 7px;visibility: hidden;"></div>
<div class="inner">
<img class="side-a" src="../images/test.jpg" alt="International Space Station">
<div class="product-desc side-b">
<h3>hi</h3>
buy
</div>
</div>
</div>
</li>
The resizing is because of your first rule transform: scale(1.5);. It tells the browser to initially resize the .product element to 50% more than its original size. But than on hover, you overwrite your transform- rule by only a rotation statement. Either delete this first rule or also use it in your :hover definition:
.product:hover {
transform: scale(1.5) rotateY(-180deg);
}
The transform: scale(1.5); created the problem!
Thanks to #Mohd Asim Suhail for pointing it out!
transform: scale(1.5); is creating problem for you, – Mohd Asim Suhail 3 mins ago
What I am trying to do is, when the user hover on the image the image should reposition along the x-axis and it should reveal the .content. i have set z-index: 10 to image and z-index: 1 to .content to make .content to be underneath the image. but .content still remains on top of the image. Please help me..
Here is my code:
html
<div class="holder">
<img src="http://placehold.it/350x150" />
<div class="content">
<h3>hello there</h3>
view more
<div/>
</div>
css
.holder {
margin-top: 130px;
position: relative;
}
img {
display: block;
transition: -webkit-transform 0.5s;
transition: -moz-transform 0.5s;
z-index: 10;
}
.content {
background: blue;
height: 100%;
color: white;
z-index: 1;
position: absolute;
top: auto;
bottom: 0;
}
a {
color: white;
background: red;
padding: 10px;
}
.holder:hover img {
-webkit-transform: translateX(90px);
-moz-transform: translateX(90px);
}
Here I corrected issue of my code thanks to Jones G. Drange. As he pointed out in his comment
"z-index can only be modified in elements with a position other than static. Your img has position: static by default"
jsfiddle
img {
position: relative;
}