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>
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>
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>
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.
In the following code, on hovering over the green button, the blue bar appears.
But when I write the words "About Me" on the about_button div (ie the green button), the shape of the button changes.
How can I successfully write "About Me" on the green button without spoiling the shape of the button?
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
add vertical-align:top to it, because inline-block by default has vertical-align:baseline
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
vertical-align:top; /** THIS LINE */
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button">About Me</div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</body>
</html>
change position on #about_button from relative to absolute
You have the attribute display:inline-block on the button, this forces the shape wrap around the content inside it. Change it to display:block.
Here are my box classes
.rectangle-box {
width: 200px;
height: 30px;
background: #808080;
opacity: 0.3;
float: right;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
In HTML:
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
DEMO: https://jsfiddle.net/uq6ectfc/1/
I need rectangle-red to have opacity of 1 and rectangle-box of 0.3. But it sticks to the parent opacity.
How can I fix it?
You can't the opacity cannot be greater than parent
but you can use two methods
I have used rgba rgba(0,0,0,0.0)
.rectangle-box {
width: 200px;
height: 30px;
background: rgba(128, 128, 128, 0.3);
float: right;
position: relative;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
Or the second method i have used :pseudo element to add a background
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.rectangle-box:after {
content: '';
opacity: 0.3;
background: #808080;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index:-1;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
Use RGBA instead of hex. using opacity: affects child elements and rgba does not
.rectangle-box {
width: 200px;
height: 30px;
background-color: rgba(128,128,128, 0.3);
float: right;
}
.rectangle-red {
width: 65px;
height: 30px;
background-color: rgba(255,71,66, 1);
float: left;
}
A better way to structure this would be to create a div that contains both boxes. This way each of the boxes opacity will not interfere with each other.
<div class="container">
<div class="rectangle-box"></div>
<div class="rectangle-red"></div>
</div>
.container{
width: 200px;
height: 30px;
float: right;
}
.rectangle-box {
width: 100%;
height: 100%;
background: #808080;
opacity: 0.3;
}
.rectangle-red {
width: 65px;
height: 100%;
background: #ff4742;
opacity: 1;
float: left;
}
you can't
All you can do is create element inside .rectangle-box absolute (my case) or relative or whatever you want with lower opacity .lower-opacityso they are siblings and not disturb each other opacity property
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.lower-opacity{
position: absolute;
opacity: 0.3;
width: 100%;
height: 100%;
background: #808080; //**EDITED** BACKGROUND NOW WILL BE TRANSPARENT
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="lower-opacity"></div>
<div class="rectangle-red"></div>
</div>
Here is a nice and neat way using pseudo elements.
With this you can as well add images and svg to each background which gives a lot of options.
If you need other elements within each box, you'll need the second inner div.
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.rectangle-box:before {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: #808080;
opacity: 0.3;
}
.rectangle-box:after {
content: "";
top: 0;
left: 0;
width: 65px;
height: 100%;
position: absolute;
background: #ff4742;
opacity: 1;
}
<div class="rectangle-box">
</div>