I'm trying to understand why in Mozilla this text is not centered but as soon as you resize the window it resets in the right position.
.shape {
position: fixed;
display: flex;
right: 20%;
width: 58%;
height: 62%;
background: #E8E8E8;
color: black;
flex-direction: column;
align-items: center;
top: -100%;
-webkit-animation: slide 1s forwards;
animation: slide 1s forwards;
}
.text {
position: absolute;
bottom: 0;
text-align: center;
font-size: 1.5vw;
font-family: "Basic", serif;
text-decoration: none;
padding-bottom: 4%;
padding-left: 12%;
padding-right: 12%;
transition: 0.1s ease;
}
Here's the website
marcotronconi.com/about.html
P.S. Sorry for the silly question but i'm not really into coding, thanks
Related
I m trying to make an expandable input field to push other div when its expanded. So far its only covering the div which it supposed to push. Any ideas how to achieve that with css ?
input[type="text"] {
border-radius: 0;
height: 24px;
line-height: 24px;
outline: none;
position: absolute;
right: 10rem;
top: 5rem;
-webkit-transition: width 15ms ease;
-moz-transition: width 15ms ease;
-o-transition: width 15ms ease;
-ms-transition: width 15ms ease;
transition: width 2s ease;
width: 10%;
}
input[type="text"]:focus {
width: 30%;
}
.div-to-pushed {
height: 28px;
width: 10%;
border: 1px solid black;
position: relative;
top: 72px;
left: 300px;
}
https://stackblitz.com/edit/angular-ph3dmv?embed=1&file=src/app/app.component.ts
The issue is your input element is position absolute which takes it out of document flow.
remove the position absolute and remove top and left positioning on both elements.
add justify-content: flex-end to the parent container;
Code Example:
.parent {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
div {
height: 28px;
width: 10%;
border: 1px solid black;
position: relative;
}
input {border-radius: 0;
height: 24px;
line-height: 24px;
outline: none;
transition: width 2s ease;
width: 10%;
}
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've got some css/html code. I wanna improve my "unhover" state by doing following: when I hover over a button there is a before element sliding from left to right. I can easily change it from right to left. However when I do the "unhover" action, before element slides in the opposite direction - from right to left. What I want to achieve is animating it's width from 100% to 0% but from left to right. What should I do to get the result?
https://codepen.io/trueFalse24/pen/YzKNgYm
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
}
}
}
I've modified your pen to get the effect by changing a few usages of the left and right properties. My edits are marked by comments below.
.container{
padding:0;
margin: 0;
box-sizing: border-box;
background: #3498db;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
right: 0; /* Replaced left */
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
right: auto; /* Added */
left: 0; /* Added */
}
}
}
}
i use CSSGrid with an hover effect who works great on desktop, but i have a bug on mobile and can't find the problem.
You can see the page here, and look on desktop on mobile view: http://lafabutineuse.flywheelsites.com/realisations
I defined my image title and link to be absolute and 100% height of the div.
The code of my title on image:
h2 a, h2 {
background: rgba(0,0,0,0);
color: rgba(0,0,0,0);
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center;
padding: 10px;
padding-bottom: 10px!important;
text-align: center;
height: 100%;
z-index: 10000;
transition-property: background;
-webkit-transition-property: background;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}
and same code on hover but with differents colors:
h2 a:hover, h2:hover {
background: rgba(224,197,76,0.61);
color: white;
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center!important;
vertical-align: middle;
padding: 10px;
padding-bottom: 10px!important;
text-align: center!important;
justify-content: center;
display: flex;
height: 100%;
z-index: 10000;
}
I tried some codes to fix the problem but can't achieve to keep the same effect on mobile.
Do you have any idea please?
Thank you
You have not explicitly set position for .et_pb_grid_item on screens smaller then 980px - that's why your hover-link takes 100% of .et_pb_portfolio_items.
Set position: relative; for .et_pb_grid_item and that should fix the hover problem.
.et_pb_grid_item {
position: relative;
}
I'm trying to create a CSS transistion where When I click on a button it fades out and disappears to which another element will take it's place.
I've nearly completed it, however. When applying the class .hide to the button it "jumps" (the height property is not to be touched until the opacity is done). The max-height does not seem to respect the css transition property I've set in the css.
Codepen: https://codepen.io/basickarl/pen/zwzNXM?editors=1111
HTML:
<div class="app-profession">
<button id="one" class="add-profession" onclick="func()">
<img/>
Click me!
</button>
<div id="two" key="pickArea" class="pick-area">
Here! 2
</div>
</div>
SCSS:
button.add-profession {
width: 500px;
padding-top: 16px;
padding-bottom: 16px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Verdana';
font-size: 18px;
font-weight: 300;
text-decoration: none;
color: black;
outline-style: none;
border: none;
border-radius: em(0);
opacity: 1;
background: lightblue;
img {
margin-right: em(5);
content: url('static/images/add_cross_white.png');
height: em(30);
}
transition: opacity 2s ease-in-out 0s, max-height 0s linear 2s, padding 0s ease-in-out 2s;
&.hide {
opacity: 0;
max-height: 0; // <--- here
padding: 0;
overflow: hidden;
}
&:hover {
background-color: red;
cursor: pointer;
}
}
.pick-area {
display: flex;
justify-content: center;
align-items: center;
background-color: green;
opacity: 0;
max-height: 0em;
overflow: hidden;
width: 500px;
padding: 16px;
transition: all 2s linear 2s;
&.show {
max-height: 500px;
opacity: 1;
}
}
JS:
function func() {
document.getElementById('one').classList.add('hide');
document.getElementById('two').classList.add('show');
}
If you add a max-height to the button.add-profession class it will stop jumping
button.add-profession {
width: 500px;
padding-top: 16px;
padding-bottom: 16px;
max-height: 60px; /* added property */
....
Updated codepen