I have a CSS Grid container and a sidebar and content area inside it. I want to when user close the sidebar, content area, horizontally expands to fill the whole width of the container.
I've used transformX(-100%) on hover the sidebar for hiding and transformX(0%) for showing the sidebar on mouse out in my bellow sample:
.test-container {
display: grid;
background-color: aquamarine;
grid-template-columns: 1fr 2fr;
grid-template-areas: "sidebar content";
height: 100vh;
}
.test-sidebar {
background-color: blue;
grid-area: sidebar;
transform: translateX(0%);
font-size: 40px;
color: white;
text-align: center;
transition: 2000ms;
}
.test-sidebar:hover {
transform: translateX(-100%);
transition: 2000ms;
}
.test-content {
background-color: blueviolet;
font-size: 40px;
text-align: center;
grid-area: content;
color: white;
}
<div class="test-container">
<div class="test-sidebar">Sidebar</div>
<div class="test-content">Content</div>
</div>
Here is a solution with hovering on all grid element, just to demonstrate, how we can act with two different cells. Here we have grid-template-columns: auto 1fr; in .test-container and static width in .test-sidebar. Now they are expanding/collapsing like you want.
About other behave, what does it mean "when user close the sidebar"? Describe this action pleas. Describe both behave of the sidebar, in which case it should collapse and expand? I think, the whole solution will requires JS. I will add it after your description, if needed.
.test-container {
display: grid;
background-color: aquamarine;
grid-template-columns: auto 1fr;
height: 100vh;
transition: all 2s ease;
}
.test-sidebar {
background-color: blue;
font-size: 40px;
color: white;
text-align: center;
overflow: hidden;
width: 200px;
transition: all 2s ease;
}
.test-container:hover .test-sidebar {
width: 0;
}
.test-content {
background-color: blueviolet;
font-size: 40px;
text-align: center;
color: white;
}
<div class="test-container">
<div class="test-sidebar">Sidebar</div>
<div class="test-content">Content</div>
</div>
Related
I have a parent div called profile-pic in a div wrapper. In the parent div resides an svg image. I need the svg image to be larger than the parent div so the svg image (barbed wire) looks like a border surrounding the parent div. I understand if I resize the child element (barbed wire) it will do no good. I also understand that resizing the parent element will do no good since the child element grows and shrinks with max-width of parent div size. If I try to set a width and height on the image bigger than the parent element it breaks. Here is what I have tried. codepen
<main>
<div class="wrapper">
<div class="profile-pic">
<img src="src/barbed-wire-circle.svg" alt="circle">
</div>
</div>
</main>
body {
width: 90%;
margin: auto;
text-align: center;
padding: 20px 0px;
background: #fffcd8;
}
main {
height: 700px;
display: flex;
justify-content: center;
align-items: center;
background: none;
}
main img {
max-width: 100%;
animation-name: rotate;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border-radius: 50%;
background-size: auto 50%;
background-position: center;
}
#keyframes rotate {
from{ transform: rotate(-360deg); }
to{ transform: rotate(360deg); }
}
.wrapper {
width: 700px;
height: 700px;
display: flex;
align-items: center;
justify-content: center;
background-color: none;
}
.profile-pic {
width: 500px;
height: 500px;
background-color: white;
border-radius: 50%;
background-size: auto 50%;
}
I realized I needed to add another div called inner-profile with an absolute position. Then on the parent div profile-pic, display as flex with justify-content and align-items center. updated codepen
<main>
<div class="wrapper">
<div class="profile-pic">
<div class="inner-profile"></div>
<img class="" src="src/barbed-wire-circle.svg" alt="circle">
</div>
</div>
</main>
.inner-profile {
position: absolute;
width: 470px;
height: 470px;
background-color: thistle;
border-radius: 50%;
}
.profile-pic {
width: 500px;
height: 500px;
background-color: none;
border-radius: 50%;
background-size: auto 50%;
display: flex;
justify-content: center;
align-items: center;
}
i wanted to create a box with a border and inside it a small div, i wanted when i have a hover over the box the small div inside it will start to animate and but the animation did not start at all, so i deleted hover also the animation did not work in this case too,
here what i have tried:
<div class="row mb-4">
<div class="col col__animation">
<div id="object"></div>
</div>
</div>
Scss:
.col__animation{
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
#object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
}
&:hover{
#object{
transition: transform 1000ms;
transition-timing-function: ease-in-out;
}
}
}
I am trying to try many animations effects like making the box move to right and go back to initial position and many more animations
This should work
.col__animation {
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
}
.col__animation #object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
animation: mymove 3s infinite;
}
#keyframes mymove {
0% {
margin-left: 0px;
}
50% {
margin-left: calc(100% - 40px);
}
100% {
margin-left: 0px;
}
}
Codepen
I'm learning about CSS animations and am trying to animate this stamp which uses relative and absolute positioning. I want the animation to:
Start at it's original size.
Grow 2-3xs that size and be at the center of the screen.
Pause for 2-3 seconds seconds.
Shrink back down to it's original size and spot.
The problem I'm running into is keeping the elements positioned on top of the stamp in the same place as the transitions occur. Looking to keep it pure CSS if possible (*side note I haven't added any web-kit/browser support yet because I'm just trying to make it work first).
Here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 90vh;
justify-content: flex-end;
align-items: flex-start;
background: grey;
}
.park-img {
width: 10rem;
height: 11.2rem;
display: inline-block;
margin-left: 2px;
padding: 10px;
background: white;
position: relative;
top: 2rem;
left: -2rem;
/*-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
/*The stamp cutout will be created using crisp radial gradients*/
background: radial-gradient( transparent 0px, transparent 4px, white 4px, white);
/*reducing the gradient size*/
background-size: 20px 20px;
/*Offset to move the holes to the edge*/
background-position: -10px -10px;
/*Animation*/
animation: stampAnimation 9s ease-in-out;
}
#keyframes stampAnimation {
0% {}
50% {
transform: scale(3, 3) translate(-35%, 35%);
}
75% {
transform: scale(3, 3) translate(-35%, 35%);
}
}
.stampText {
position: relative;
top: -1rem;
left: -1.8rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fafafa;
text-transform: uppercase;
animation: stampAnimation 9s ease-in-out;
}
.park-name {
font-weight: bold;
text-align: center;
font-size: 1rem;
}
.park-title {
width: 90%;
overflow: hidden;
text-align: center;
font-size: .5rem;
}
.park-title:before,
.park-title:after {
background-color: #fafafa;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 10%;
}
.park-title:before {
right: 0.5rem;
margin-left: -50%;
}
.park-title:after {
left: 0.5rem;
margin-right: -50%;
}
<div class="park-stamp">
<img src="https://res.cloudinary.com/saveallthethings/image/upload/v1614633821/daniel-burka-X_IwSPO2GH0-unsplash_zvoyst.jpg" class="park-img" />
<div class="stampText">
<div class="park-name">Zion</div>
<div class="park-title">National Park</div>
</div>
</div>
As well as the codepen:
https://codepen.io/aspirationalhobbit/pen/GRNPqxw?editors=0100
I have edited your code to make changes that are different from my initial answer.
Check https://codepen.io/udabasili/pen/VwmqmQK?editors=1100.
Basically, I created a css for the container of your element and moved the animation there. I also removed the translate from your animation. Check the css in the codepen to see the changes
.park-stamp{
animation: stampAnimation 9s ease-in-out infinite;
}
I'm just playing around with animation in css.
This is the code that i'm writing...
The html:
<div class="wrapper">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
</div>
And the css:
.wrapper {
display: grid;
width: fit-content;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
grid-gap: 1rem;
position: relative;
}
.wrapper>div {
background: linear-gradient(to bottom right, crimson, yellow);
border: 5px solid #555;
border-radius: 5px;
width: 150px;
height: 150px;
}
.item-6 {
animation-name: playthis;
animation-duration: 5s;
animation-fill-mode: both;
animation-iteration-count: initial;
}
#keyframes playthis {
0% {
width: 100%;
}
50% {
width: 400%;
}
100% {
width: 100%;
}
}
So is just a simple animation, but i'm trying to figure it out how I could achieve a certain effect and that is: when the box reaches 400% width, let the right border remain fixed in that position and then return to its original size... as if the right border drags the left to itself...
I hope i was clear!
This is a possible solution using margin-left.
:root{
--maxWidth: 200%;
--finalWidth: 100%;
}
.wrapper {
display: grid;
width: fit-content;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
grid-gap: 1rem;
position: relative;
}
.wrapper>div {
background: linear-gradient(to bottom right, crimson, yellow);
border: 5px solid #555;
border-radius: 5px;
width: 150px;
height: 150px;
}
.item-6 {
animation-name: playthis;
animation-duration: 5s;
animation-fill-mode: both;
animation-iteration-count: initial;
}
#keyframes playthis {
0% {
width: var(--finalWidth);
}
50% {
width: var(--maxWidth);
margin-left: 0%
}
100% {
width: var(--finalWidth);
margin-left: calc(var(--maxWidth) - var(--finalWidth));
}
}
<div class="wrapper">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
</div>
The margin-left value in the last key frames can be calculated using the width of your object like this:
maxWidth - finalWidth
Where maxWidth is the width at 50% of your animation and finalWidth the width at the end of your animation. To simplify the use of the code, I used css variables and calculate the final margin-left
I have this sort of navigation bar implemented. My problem is that, no matter how I try to tune style for both nav and hyperlinks inside, I can't make text vertically centered, links are always shown in the very top of the hyperlink boxes. vertical-alignment: middle should be the solution, but nothing happens and the result remains the same.
PS: I oversized the length of the navigation bar to remark the wrong behaviour of the style.
* {
padding: 0;
margin: auto;
font-family: verdana;
}
nav {
display: flex;
position: fixed;
width: 100%;
height: 60%;
top: 50%;
text-align: center;
background-color: blue;
display: space-around;
z-index: 1;
}
nav a {
float: left;
width: 20%;
height: 100%;
background-color: blue;
color: white;
vertical-align: text-bottom;
font-weight: bold;
vertical-align: middle;
font-size: 200%;
text-align: center;
}
nav a:hover {
-webkit-animation: selectanim 0.5s;
-webkit-animation-fill-mode: forwards;
animation: selectanim 0.5s;
animation-fill-mode: forwards;
}
#-webkit-keyframes selectanim {
from {
background-color: blue;
}
to {
background-color: purple;
}
}
#keyframes selectanim {
from {
background-color: blue;
}
to {
background-color: purple;
}
}
<nav>
<a>1 link</a>
<a>2 link</a>
<a>3 link</a>
<a>4 link</a>
</nav>
you were on the right track. vertical-align:middle is what you need, however it only works if your element is a table cell. so with css you can set the display to "table-cell" and remove "float:left" and set the parent (nav) to behave like a table and it should work:
nav {
display: table
}
nav a {
display:table-cell;
vertical-align:middle;
}
Here's a fiddle for you. Note that i have removed parts of the css to keep answer clean. Hope that helps
I would add a CSS class to your "a" tags in the html like so:
<a class="vert" onclick="showArticle('...')">1 link</a>
Where the CSS for .vert would be:
.vert {
padding-top: 15%;
}
You can play with that padding percentage and adjust it to better fit your site, or make it a fixed value... up to you.
link to JSFIDDLE
Give it a shot. Just gives you a bit more control over the "a" element.
Since you are already using flexible boxes, you could turn your links to flexible containers.
This way you can use align-items: center to center their contents vertically:
nav > a {
display: flex;
align-items: center;
justify-content: center; /* Instead of text-align: center */
}
* {
padding: 0;
margin: auto;
font-family: verdana;
}
nav {
display: flex;
position: fixed;
width: 100%;
height: 60%;
top: 50%;
background-color: blue;
}
nav > a {
flex-grow: 1;
height: 100%;
color: white;
font-weight: bold;
font-size: 200%;
display: flex;
align-items: center;
justify-content: center;
}
nav a:hover {
-webkit-animation: selectanim 0.5s;
-webkit-animation-fill-mode: forwards;
animation: selectanim 0.5s;
animation-fill-mode: forwards;
}
#-webkit-keyframes selectanim {
from {
background-color: blue;
}
to {
background-color: purple;
}
}
#keyframes selectanim {
from {
background-color: blue;
}
to {
background-color: purple;
}
}
<nav>
<a>1 link</a>
<a>2 link</a>
<a>3 link</a>
<a>4 link</a>
</nav>