Im tryng to make my modal transition from bottom to top when activated, i having no luck with transform-origin: bottom, made a sample codepen
HTML
<div class="main">
<div class="hidden">HOVER</div>
</div>
css
.main{
height: 500px;
width: 500px;
background: blue;
}
.hidden{
height: 0px;
width: 300px;
background-color: red;
transform-origin: bottom;
top: 100%;
-webkit-transition: 1s;
}
.hidden:hover{
height:200px;
-webkit-transition:height 1s;
}
https://codepen.io/danielkmx/pen/OevOLW
This should work for you but this might flicker a bit.
.main{
height: 500px;
width: 500px;
background: blue;
}
.hidden{
height: 0px;
width: 300px;
background-color: red;
transform-origin: 100% 0;
transition: all 1.0s;
position: relative;
top: 200px;
}
.hidden:hover{
height:200px;
top: 0px;
transition: all 1.0s;
}
You can do it with a relative/absolute position combination for the two DIVs (parent relative, child absolute) and according position settings in relation to the bottom of the parent:
.main {
height: 500px;
width: 500px;
background: blue;
position: relative;
}
.hidden {
height: 16px;
width: 300px;
position: absolute;
left: 0;
bottom: 0;
background-color: red;
transition: 1s;
}
.hidden:hover {
height: 200px;
}
<div class="main">
<div class="hidden">HOVER</div>
</div>
Related
Is there any way to trigger a div outside of a div without using Javascript. I tried CSS combinators and couldn't get it to work. I'm not sure if I just did it wrong or it's not possible. If anyone knows a way to achieve this I would appreciate the help.
.wrapper{
display: flex;
flex-direction: row;
}
.overlay{
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
opacity: 0.5;
}
.bottom:hover .overlay, .top:hover .overlay {
bottom: 0;
height: 100%;
}
.top{
position: relative;
width: 200px;
height: 200px;
margin: 25px 25px 0px 0px;
background-color: black;
}
.bottom{
height: 200px;
width: 200px;
background-color: green;
margin-top: 25px;
}
<div class="wrapper">
<div class="top">
<div class="overlay"></div>
</div>
<div class="bottom"></div>
</div>
Yes but to an extent. In this example I can rotate the second div in the html flow by hovering over the first div using ~.
#one {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
#two {
position: absolute;
right: 10px;
width: 100px;
height: 100px;
background: blue;
}
#one:hover ~ #two{
animation: rotate 2s linear infinite;
}
#keyframes rotate {
to {transform: rotate(360deg)}
}
<div id="one"></div>
<div id="two"></div>
For your code if you place <bottom> before <top> in html you can hover over the green to make the overlay animate.
html
<div class="wrapper">
<div class="bottom"></div>
<div class="top">
<div class="overlay"></div>
</div>
</div>
CSS
.bottom:hover ~ .top .overlay{
bottom: 0;
height: 100%;
}
UPDATE:
.wrapper{
display: flex;
flex-direction: row-reverse;
width: min-content;
}
.overlay{
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
opacity: 0.5;
}
.bottom:hover ~ .top .overlay{
bottom: 0;
height: 100%;
}
.top{
position: relative;
width: 200px;
height: 200px;
margin: 25px 25px 0px 0px;
background-color: black;
}
.bottom{
height: 200px;
width: 200px;
background-color: green;
margin-top: 25px;
}
<div class="wrapper">
<div class="bottom"></div>
<div class="top">
<div class="overlay"></div>
</div>
</div>
When I move mouse on red div I want grey div go a little upper. But when it moves and mouse happens to be on red div it starts to lag and hesitate between moving up and down. What should I do for this animation for avoiding this hesitation and moving grey object smooth?
.dm-intro-news {
width: 200px;
height: 200px;
background: red;
transition: 0.5s;
}
.dm-intro-news {
width: 390px;
height: 150px;
background: #333333;
transition: 0.4s;
}
.wr {display: inline-block;transition:2s}
.dm-short-news{
display:inline-block;
overflow: hidden;
width: 390px;
height: 40px;
background: red;
position: relative;
}
.dm-short-news:hover~.dm-intro-news{
margin-top:-50px;
position: absolute;
}
<div class="wr">
<div class="dm-short-news"></div>
<div class="dm-intro-news"></div>
</div>
This is because hover event will be cancelled when .dm-intro-news is on top.
Put pointer-events: none; on .dm-intro-news:
.dm-intro-news {
width: 200px;
height: 200px;
background: red;
transition: 0.5s;
}
.dm-intro-news {
width: 390px;
height: 150px;
background: #333333;
transition: 0.4s;
}
.wr {display: inline-block;transition:2s; position: relative;}
.dm-short-news{
display:inline-block;
overflow: hidden;
width: 390px;
height: 40px;
background: red;
}
.dm-short-news:hover::before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.dm-short-news:hover~.dm-intro-news {
margin-top:-50px;
pointer-events: none;
position: relative;
z-index: 1;
}
<div class="wr">
<div class="dm-short-news"></div>
<div class="dm-intro-news"></div>
</div>
Remove all the position from your elements and consider hover on both elements:
.wr {
display: inline-block;
width: 390px;
}
.dm-short-news {
height: 40px;
background: red;
margin-bottom:5px;
}
.dm-intro-news {
height: 150px;
background: #333333;
transition: 0.4s;
}
.dm-short-news:hover~.dm-intro-news,
.dm-intro-news:hover{
margin-top: -50px;
}
<div class="wr">
<div class="dm-short-news"></div>
<div class="dm-intro-news"></div>
</div>
It's easy, You just need remove position:absolute from .dm-short-news:hover~.dm-intro-news.
Let me know further clarification.
Hope it will help you. :)
.dm-intro-news {
width: 200px;
height: 200px;
background: red;
transition: 0.5s;
position: relative;
}
.dm-intro-news {
width: 390px;
height: 150px;
background: #333333;
transition: 0.4s;
}
.wr {display: inline-block;transition:2s}
.dm-short-news{
display:inline-block;
overflow: hidden;
width: 390px;
height: 40px;
background: red;
}
.dm-short-news:hover~.dm-intro-news,
.dm-intro-news:hover{
margin-top:-50px;
}
<div class="wr">
<div class="dm-short-news"></div>
<div class="dm-intro-news"></div>
</div>
You can set an element to ignore the mouse cursor.
I added pointer-events: none; on .dm-short-news.
[edit] I also removed position: absolute.
.dm-intro-news {
position: relative;
width: 390px;
height: 150px;
background: #333333;
transition: 0.4s;
z-index: 1;
pointer-events: none;
}
.dm-short-news{
display:inline-block;
overflow: hidden;
width: 390px;
height: 40px;
background: red;
}
.dm-short-news:hover~.dm-intro-news{
margin-top:-50px;
}
<div class="wr">
<div class="dm-short-news"></div>
<div class="dm-intro-news"></div>
</div>
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 am trying to make a sort of Venn-Diagram that is going to be used for navigation later.
I have three intersecting ellipsoids created with CSS shapes. Each ellipsoid, as well as their two intersections, will be distinct links later on. Also, when you hover over them they should pop out as per transform: scale(1.3).
My issue is that I'm using ellipsoids which are partially transparent with :after to create the intersections, which creates a problem when hovering over them because the :hover condition gets triggered when hovering anywhere on the partially transparent ellipsoid and not just the :after part. This means that the nonintersecting areas are not hoverable because they are obstructed by the other invisible ellipsoid.
I think the example will make this clearer.
Here is the code:
CSS:
.venn-container{position: relative; left: 0;}
.cat_one{
width: 400px;
height: 200px;
background: red;
border-radius: 200px / 100px;
position: absolute;
float: left;
opacity: 0.5;
}
.cat_two{
width: 400px;
height: 200px;
background: green;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 240px;
opacity: 0.5;
}
.cat_three{
width: 400px;
height: 200px;
background: blue;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 480px;
opacity: 0.5;
}
.int1{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
}
.int1:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: 240px;
}
.int1:hover{
transform: scale(1.3);
left: -35px;
}
.int2{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
left: 80px;
}
.int2:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: -240px;
}
.int2:hover{
transform: scale(1.3);
left: 115px;
}
HTML:
<div class="venn-container">
<div class="cat_one"></div>
<div class="cat_two"></div>
<div class="cat_three"></div>
<div class="int1"></div>
<div class="int2"></div>
</div>
And here is a fiddle: https://jsfiddle.net/y3Lvmuqg/2/
I would like the :hover to only get triggered in the intersections, and later make cat_one and cat_two hoverable outside the intersections.
I don't know if there is a way I'm doing this is the best and I'm open to suggestions.
Thanks for getting back to me #ge0rg I spent about an hour fiddling with CSS and HTML and came up with this code using just divs with background colors, hover events and border radius's (along with a few z-index and positioning techniques).
Hope you enjoy your reworked venn diagram...
You may have to mess around with the size, and definetly will have to mess with the positioning (however they're all inside a div and so it makes it so that you can just position the div and the rest will happen magically) I added a background color to the div just to show that nothing was transparent, and I also added a always on top function for viewing a section, and I hope you enjoy!
.Venn {
background: linear-gradient(to bottom right, blue, lightblue);
}
.d1:hover, .d2:hover, .d3:hover {
color: #565656;
animation: top 2s steps(2, end) forwards;
-webkit-animation: top 2s steps(2, end) forwards;
box-shadow: 0px 0px 20px white;
}
.d1, .d2, .d3 {
overflow-wrap: break-word;
}
.d1 center, .d3 center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.d1 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 1;
position: absolute;
border-radius: 100%;
top: 0px;
}
.d3 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 2;
position: absolute;
border-radius: 100%;
top: 0px;
left: 81px;
}
.d1:hover, .d3:hover {
transform: scale(1.05);
}
.d2 {
border-radius: 100% 0;
height: 90px;
width: 87.5px;
transform: rotate(-45deg) scale(.7);
position: absolute;
top: 15px;
left: 55.35px;
z-index: 3;
border: 1px solid black;
}
.d2b {
transform: rotate(45deg);
padding: 0;
margin: 0;
}
.d2b center {
position: relative;
left: 20px;
}
.d2:hover {
transform: rotate(-45deg);
}
.Venn {
height: 100px;
}
-webkit #keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
#keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
<div class="Venn" style="position: relative; left: 50px; width: 300px; height: 100px;">
<div class="d1" style=" background-color: grey;">
<center> 1 </center>
</div>
<div class="d2" style=" background-color: #AAAAAA;">
<div class="d2b" style="max-width: inherit;">
<center> 2 </center>
</div>
</div>
<div class="d3" style=" background-color: lightgrey;">
<center> 3 </center>
</div>
</div>
For those of you who would prefer a JSfiddle/ CodePen here you go a Codepen.
Below is my effort.
http://liveweave.com/i1qkNw
Below is also my code
.container {
display: inline-block;
position: relative;
border: 1px solid green;
}
.middle {
position: relative;
width: 300px;
height: 250px;
background: black;
}
.door {
position: absolute;
width: 300px;
height: 250px;
background: red;
top: 0;
left: 0;
opacity: 0.5;
transition: .5s;
transform-origin: center center;
}
.container:hover .door {
transition: .5s;
opacity: 0;
width: 0;
height: 0;
}
<div class="container">
<div class="middle"></div>
<div class="door"></div>
</div>
What i want to do is, when user hovers over container, I want the door div's width/height to be zero. As you can see, I am achieving this effect but it disappears to upper left corner. Is there any way I can make it disappear to its center?? Like the width and height are reduced till its center and disappear.
Kindly guide me how to achieve this effect.
You have to set top / bottom / left / right values to 50%.
.container {
display: inline-block;
position: relative;
border: 1px solid green;
}
.middle {
position: relative;
width: 300px;
height: 250px;
background: black;
}
.door {
position: absolute;
width: 300px;
height: 250px;
background: red;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
transition: .5s;
transform-origin: center center;
}
.container:hover .door {
transition: .5s;
opacity: 0;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
width: 0;
height: 0;
}
<div class="container">
<div class="middle"></div>
<div class="door"></div>
</div>