Attempting to add a transition time when hovering over an absolutely positioned div that adds 20px to the top. The hover effect is working, but the transition time is not taking effect.
SCSS:
div {
position: relative;
margin: 0 auto;
height: 400px;
width: 300px;
background-color: grey;
transition: all 5s;
&:hover {
top: 20px;
}
}
CodePen: https://codepen.io/KevinM818/pen/YYZqKY
Set initial value of top property to 0px.
div {
position: relative;
margin: 0 auto;
height: 400px;
width: 300px;
background-color: grey;
transition: all .5s;
top: 0px;
&:hover {
top: 20px;
}
}
CodePen: https://codepen.io/anon/pen/opZxzo
Related
* {
box-sizing: border-box;
}
here I just styled the button I have no any problem
button {
background-color: rgb(21, 163, 92);
color: white;
text-align: center;
padding: 20px;
width: 150px;
border-radius: 5px;
border: none;
font-size: 28px;
display: block;
margin: 150px auto;
cursor: pointer;
position: relative;
overflow: hidden;
}
here is my question because if I removed position: absolute it will not accept percentage height but with position absolute percentage height value is accepted
button > div {
position: absolute;
left: 0;
bottom: 0;
width: 300%;
height: 350%;
background-color: #f1f1f1;
opacity: 0;
transition: 0.8s;
}
also here there is no problem I am just making the ripple button effect
button:active > div {
width: 0;
height: 0;
opacity: 1;
transition: 0s;
}
<html>
<body>
button>click
<div></div>
</button>
</body>
</html>
I have a map element wrapped inside of a container and I'm trying to change its position to sticky (as opposed to relative). I have text that I would like to scroll over the map as the viewer scrolls down, however when I open up the inspection tools I see the position of the #map element reverts back to relative, despite it being sticky in my actual code. When I change it to sticky in the browser, it works fine. Can someone tell me what I'm doing wrong here
Here is my HTML
<div id="mapContainer" class="container-map">
<div id="map" style="position: sticky;" class="leaflet-container
leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-
touch-drag leaflet-touch-zoom" tabindex="0">
</div>
<div id='sections'>
<div>
<h1>Operation Entebbe</h1>
<p class="text">
<span class="text-decorate">O</span>Sample Text
</p>
</div>
</div>
</div>
Here is my CSS
#mapContainer{
position: relative;
}
#sections{
z-index: 99;
max-width: 100%;
width: 640px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#sections > div{
background: white;
height: 100%;
opacity: .75;
transition: 0.5s;
}
#sections > div p.text {
display: block;
color: #000000;
z-index: 10;
}
#sections > div.graph-scroll-active{
opacity: 1;
}
#map {
margin-left: 40px;
z-index: 3;
width: 500px;
position: -webkit-sticky;
position: sticky;
top: calc(50% - 250px);
}
#map svg {
z-index: 2;
}
#map svg {
-webkit-transition: transition .6s;
-moz-transition: transition .6s;
-ms-transition: transition .6s;
-o-transition: transition .6s;
transition: transition .6s;
}
#media (max-width: 925px) {
#map{
width: 100%;
margin-left: 0px;
float: none;
}
#sections{
width: auto;
position: relative;
margin: 0px auto;
}
#sections > div{
background: rgba(255,255,255,.5);
padding: 10px;
border-top: 1px solid;
border-bottom: 1px solid;
margin-bottom: 80vh;
}
pre{
overflow: hidden;
}
h1{
margin: 10px;
}
}
#map {
width: 1000px;
height: 600px;
margin-left: 140px;
margin-top: 50px;
position: sticky;
}
svg {
position: relative;
}
Any help would be immensely appreciated.
I have a div that I want to collapse to a height of 0. I can't have it be display: none or visibility: hidden, because I want to animate on this element.
It's parent is:
position: absolute;
display: flex;
align-items: center;
top: 28px;
background: red;
width: 100%;
boxShadow: 0px 8px 6px -5px black;
zIndex: 4;
When "hidden", the styling of the element has:
height: 0px;
line-height: 0px;
overflow: hidden;
The style of the content that is overflowing has this styling:
position: absolute;
height: 75px;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid #5A5A5A;
line-height: 75px;
The three elements above are divs.
Because I am animating on div, I don't want to have to change the styling of the overflowing content if possible.
How can I properly hide the element by collapsing the height?
Since you use position: absolute the .parent will not grow with its content, so you need to give it a height, here done with height: 75px
html,
body {
margin: 0;
}
div.parent {
position: absolute;
display: flex;
align-items: center;
top: 28px;
height: 75px;
background: red;
width: 100%;
box-shadow: 0px 8px 6px -5px black;
z-index: 4;
overflow: hidden;
}
.content {
position: absolute;
height: 75px;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid #5A5A5A;
line-height: 75px;
background: rgba(0,0,0,0.2);
transition: height 1s;
overflow: hidden;
}
div.parent:hover .content {
height: 0;
}
<div class="parent">
<div class="content">
Hey, there, I'm a test text. Hover me and I disappear.
</div>
</div>
You could do it this way:
.testing {
height: 60px;
width: 200px;
background-color: #333333;
-webkit-transition:all 0.3s ease 0s;
-moz-transition:all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.testing:hover {
height: 0px;
}
.testing-class {
font-size: 20px;
text-align: center;
color:#fff;
}
.testing-class:hover {
display: none;
}
<div class="testing">
<p class="testing-class">This is a test.</p>
</div>
The most important part though is the transition is not present.
I've been working on an Angular plugin that uses a template. My goal is to add more padding-top to the section "loader-wrap", but when I do this, the second div called "message-wrap" is modified and moved as well.
I need add padding-top: 100px to 'loader-wrap' without moving down 'message-wrap' along with it. How do I fix this?
Basic Structure HTML
<div id="page-wrap">
<section id="loader-wrap"></section>
<section id="message-wrap"></section>
</div>
CSS
gp-splash-loader #page-wrap {
z-index: 999;
position: fixed;
background: #FFFFFF;
width: 100%;
height: 80%;
top: 10%;
margin: 0 auto;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
-webkit-backface-visibility: hidden;
}
#media ( max-height: 735px) {
gp-splash-loader #page-wrap.opened{
height: 100%;
top: 0;
};
}
gp-splash-loader #page-wrap.closed {
opacity: 0;
}
gp-splash-loader #page-wrap.opened {
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
gp-splash-loader #loader-wrap {
width: 30%;
height: 70%;
min-width: 300px;
max-width: 600px;
margin: 10px auto;
padding-top: 50px;
}
gp-splash-loader #message-wrap {
min-width: 1px;
margin: 0 auto;
height: 30%;
min-height: 30%;
}
gp-splash-loader #header-wrap {
display: inline-block;
}
check in codepen: http://codepen.io/gpincheiraa/pen/obdXEx
Here's the deal. You can't move that loader down with padding, otherwise it will affect the message. you need a different solution. try the below html/css.
Basically I set it up so the loader and the message are in a div that will be centered. then inside of that centered div, you can do whatever you want. But the loader and message will be in the middle
if you want only the loader to be centered, then you can take the message out of the 'loader-message-box' div, and apply different styles to it. I'll work up a another fiddle for that solution
https://jsfiddle.net/ahmadabdul3/huf5zjkv/ - both message and loader are centered
https://jsfiddle.net/ahmadabdul3/huf5zjkv/1/ - this one will keep the message on the bottom
code:
html
<div class='loader-message-box'>
<div class='loader-message'>
<div class='loader'>
</div>
<div class='message'>
Message
</div>
</div>
<div class='vertical-mid-hack'>
</div>
</div>
css
body, html {
height: 100%;
margin: 0;
}
.loader-message-box {
width: 100%;
height: 100%;
text-align: center;
}
.loader-message {
display: inline-block;
vertical-align: middle;
margin: 0 -2px;
}
.vertical-mid-hack {
display: inline-block;
vertical-align: middle;
margin: 0 -2px;
height: 100%;
}
.loader {
width: 100px;
height: 100px;
background-color: teal;
border-radius: 100px;
margin: 0 auto;
margin-bottom: 20px;
}
.message {
background-color: white;
border-radius: 3px;
font-family: arial;
padding: 20px 0;
margin: 0 auto;
margin-top: 20px:
}
I removed any instance of gp-splash-loader from CSS. I don't know ng but I do know gp-splash-loader is not a valid selector. Other than that, the following CSS is the important part:
CSS:
body {
margin: 0;
padding: 0;
background: slateblue;
text-align: center;
top: 0;
position: relative;
}
#loader-wrap {
width: 30%;
height: 70%;
min-width: 300px;
max-width: 600px;
margin: 10px auto;
padding-top: 100px;
position: relative;
z-index: 10;
}
#message-wrap {
min-width: 1px;
margin: 0 auto;
height: 30%;
min-height: 30%;
position: relative;
z-index: 11;
}
Added 50px padding-top
Positioned both relative (and body as well)
Made sure that one never touches the other by using different z-index
http://codepen.io/zer00ne/full/qbYMMQ/
BTW, if you want to adjust either section up or down, add top and a negative value if you want the section to go up and vice versa. ex.
#message-wrap {
min-width: 1px;
margin: 0 auto;
height: 30%;
min-height: 30%;
position: relative;
z-index: 11;
top: -100px;
}
That should place #message-wrap 100px higher.
This is what I'm looking for:
I have cropped an image with my html and css but have no idea how to place rectangle in it. I guess for animation I should use :hover option for my crop class in div.
My code: http://jsfiddle.net/8t2hmxmn/
I guess this will fit your needs, to adjust the height of the details element, just edit the height: value inside .details
html * {
box-sizing: border-box;
}
.crop {
background-image: url('http://cs628119.vk.me/v628119319/10059/Ag3oy3YU6wY.jpg');
width: 200px;
height: 150px;
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
}
.shape {
width: 200px;
height: 50px;
color: black;
}
.details {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
transition: all 1s;
color: white;
}
.crop:hover > .details {
bottom: 0;
}
<div class="shape">
<div class="crop">
<div class="details">
Yes, this is cat!
</div>
</div>
</div>