I have a div appearing on top of an image when I hover the image itself. The div contains two divs (buttons) that also have a :hover that changes their color and sets the cursor to the pointer.
The issue is the hovering on the button doesn't trigger the hover.
Also, it seems that hovering on the image at the bottom where the btn_container will appear doesn't trigger to first :hover and doesn't make the btn_container appear.
//HTML
<div class="container">
<img src="src">
<div class="btn_container">
<div class=" btn">
<p>Select</p>
</div>
<div class="btn">
<p>Preview</p>
</div>
</div>
//SCSS
.container {
position: relative;
width: 100%;
img {
width: 100%;
height: auto;
}
.btn_container {
position: absolute;
width: 100%;
height: 40px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
display: none;
position: absolute;
}
img:hover + .btn_container,
.btn_container > * {
display: flex;
border: none;
text-align: center;
justify-content: space-around;
}
.btn {
padding: 6px 12px;
height: 14px;
background: var(--yellow-medium);
border-radius: 8px;
display: flex;
justify-content: space-evenly;
align-items: center;
color: var(--white);
font-family: roboto;
&:hover {
cursor: pointer;
background: var(--red);
color: var(--white);
}
}
}
Preview, button hovering not working:
If I force the hover on the img using the inspector, the button hovering seems to work:
The problem is in classes img:hover + .btn_container and .btn_container > *.
Here is the updated scss:
.container {
position: relative;
width: 100%;
img {
display: block;
width: 100%;
height: auto;
border: 0;
}
&:hover .btn_container {
display: flex;
}
.btn_container {
position: absolute;
bottom: 0;
left: 0;
display: none;
align-items: center;
justify-content: space-around;
width: 100%;
height: 40px;
text-align: center;
background-color: var(--dark-purple-trans);
border: none;
}
.btn {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 14px;
padding: 6px 12px;
color: var(--white);
font-family: roboto;
background-color: var(--yellow-medium);
border-radius: 8px;
cursor: pointer;
&:hover {
color: var(--white);
background-color: var(--red);
}
}
}
You can view it in action here: Codepen
I tried using opacity instead of display to toggle visibility of the btn_container and added a hover to btn_container and it seemed to work: https://jsfiddle.net/pr8dxe2g/1/
.btn_container {
width: 500px;
height: 100px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
opacity: 0;
position: absolute;
}
img:hover + .btn_container,
.btn_container:hover,
.btn_container > * {
display: flex;
opacity: 1;
border: 1px solid blue;
text-align: center;
justify-content: space-around;
}
There may be some issue with your current code with the fact that the the img div has a higher stack-order if the display is set to none initially, however I am not certain so if anyone knows I would like to know why this is the case as well.
Related
The NavBar component has a className of "NavBar" and the buttons themselves have a className of "navbar-button".
enter image description here
Here is my existing CSS for the NavBar component and the buttons themselves:
.NavBar {
position: relative;
display: flex;
flex-direction: row;
max-width: max-content;
top: -200px;
left: 1300px;
width: 500px
}
.navbar-button {
/* display: inline; */
padding: 15px;
max-width: fit-content;
margin: 10 px;
border-radius: 50px;
border: none;
font-family: 'Poppins', sans-serif;
font-size: 20px;
background-color: #35b276;
color: white;
}
Two issues-
I built a react sidebar, and for some reason whenever toggling it, the bar is behind the page's background image. I tried putting z-index: -1; on the background image, but then the image disappears (though the side bar finally shows again.) I have messed around with "position", with no success either. How can I get my sidebar to go over my background image?
The other issue is that whenever toggling the sidebar, it cover the navbar's title. Any suggestions on how to get my navbar's title to move to the side when the sidebar is being toggled?
enter image description here
enter image description here
.navbar {
align-items: center;
background-color: #060b26;
color: white;
display: flex;
height: 80px;
justify-content: start;
text-align: right;
}
.title {
margin-left: 20px;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
position: absolute;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
align-items: center;
background-color: #060b26;
display: flex;
height: 80px;
justify-content: start;
position: absolute;
width: 100%;
}
span {
margin-left: 16px;
}
.backgroundImage {
background-image: url('assets/dog.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: blur(2px);
height: 100vh;
width: 100%;
}
.dashboardButton {
background: linear-gradient(
#fd585c,
#ec7278,
#ff5b69
);
border-radius: 8px;
color: #f5f5f5;
display: grid;
font-style: "Poppins", sans-serif;
height: 80px;
left: 43%;
letter-spacing: 3px;
margin: auto;
place-items: center;
position: absolute;
text-decoration: none;
top: 55%;
width: 200px;
}
.welcomeHeader {
color: #fd585c;
display: center;
font-size: 375%;
left: 25%;
position: absolute;
top: 35%
}
.welcomeDescription {
color: #f5f5f5;
font-size: 125%;
left: 20%;
position: absolute;
top: 47%;
}
I ended up putting:
backgroundImage {
z-index: 1;
}
nav-menu.active {
z-index: 2;
}
That solved the issue!
I use css to show colors around div when hover but I want to make it more than one color live demo I want it to be multiple colors instead of one
.container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container a{
position: relative;
width: 200px;
height: 60px;
display: inline-block;
background: #fff;
margin: 20px;
}
.container a::before,
.container a::after
{
content: '';
position: absolute;
inset: 0;
background: rgb(26, 214, 58);
transition: 0.5s;
}
.container a:hover:before
{
inset: -3px;
}
<style>
#import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght#1,300&display=swap');
body {
background-color: #0e1538;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
.btn-wrapper {
width: 200px;
height: 60px;
}
.btn {
font-family: 'Zilla Slab', serif;
font-size: 2em;
color: #ffffff;
background-color: #0e1538;
width: 190px;
height: 50px;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}
.btn-wrapper:hover {
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
}
</style>
<body>
<div class="btn-wrapper center-flex">
Hover Me</div>
</div>
</body>
Instead of having a background set as a single RGB color you can set it as a background-image with multi colors introduced through a gradient.
This snippet uses a linear-gradient (which gives a sort of image type) with just 3 colors but you can have more and you can adjust how much of each you get and whether the changes go from top to bottom or left to right - see MDN documentation for the various options.
The result here is:
#import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght#1,300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Zilla Slab', serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #0e1538;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container a {
position: relative;
width: 200px;
height: 60px;
display: inline-block;
background: #fff;
margin: 20px;
}
.container a::before,
.container a::after {
content: '';
position: absolute;
inset: 0;
background: rgb(26, 214, 58);
background-image: linear-gradient(red, green, blue);
/* ADDED */
transition: 0.5s;
}
.container a:hover:before {
inset: -3px;
}
.container a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
background: #0e1538;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
}
<div class="container">
<a href="#">
<span>Hover Me</span>
</a>
</div>
Hello I'm doing a popup menu signin and I'm trying to position my fontawesome icon in the same place as mine :: before
like this:
i want this:
but I got this:
code:
<div className="App">
<div className="a">A</div>
<div className="b">
<div className="icon">
<FontAwesomeIcon
className="adjust"
icon={faUser}
size="2x"
fixedWidth
color="red"
/>
</div>
<div className="popup" />
</div>
</div>
css:
.App {
width: 100%;
height: 100px;
background: red;
display: flex;
justify-content: space-between;
}
* {
margin: 0;
padding: 0;
}
.a {
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: blue;
}
.b {
position: relative;
display: flex;
flex-direction: column;
width: 220px;
height: 100%;
background: green;
}
.icon {
width: 100%;
height: 100%;
display: flex;
background: yellow;
justify-content: flex-end;
align-items: center;
cursor: pointer;
}
.popup {
position: absolute;
transform: translateY(calc(50% + 15px));
width: 100%;
background: red;
height: 200px;
}
.popup::before {
content: "";
display: block;
position: absolute;
right: 20%;
top: -15px;
border-bottom: 15px solid #000;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
example:
https://codesandbox.io/s/morning-architecture-oi51j
I'm trying to use display: flex and position absolute for this, but to no avail
I want to create a button which changes on hover. Here you can check it: https://drive.google.com/file/d/1fIcil2Xyky8DC2NRcfZBKXCMHk9gpat2/view?usp=sharing.
Here you can see my attempt: https://codepen.io/koravski/pen/BEvKRP
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: absolute;
color: #fff;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:hover {
width: 50px;
height: 5px;
margin-top: 40px;
}
<div class="txt">Call to action</div>
<div class="box"></div>
The problem is that when I hover it, it starts looping. It should be on the red rectangle so it won't loop.
If you have any suggestions it will be nice.
Thanks.
It's not quite clear what effect you are after but you're changing the size so when it shrinks you're not hovering on it any more.
I'd suggest a transform instead (two actually, one for the size and another for the position).
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: absolute;
color: #fff;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:hover {
transform: translateY(40px) scale(.1);
}
<div class="txt">Call to action</div>
<div class="box"></div>
There are other issues but it depends on what this actually supposed to do.
In fact, you can do this with a single div.
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: relative;
color: #fff;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
transition: all 1s;
}
.txt:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
z-index: -1;
transition: all 1s;
}
.txt:hover:before {
transform: translateY(40px) scale(.1);
}
<div class="txt">Call to action</div>
This is happening because whenever the button shrinks, your mouse is no longer hovering over it, so the animation comes back up and hits the box (causing it to trigger once again. I'd suggest using a pseudo element -
.box::before {
background-color: red;
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
transition: all 1s;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.box:hover.box::before {
width: 50px;
height: 5px;
}
https://codepen.io/aedenmurray/pen/XQodQj
Here is an idea using background animation where you will need only one element:
body {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Lato', sans-serif;
}
.txt {
color: #fff;
padding:20px 50px;
background-image:linear-gradient(red,red);
background-size:100% 100%;
background-position:bottom center;
background-repeat:no-repeat;
transition:1s;
}
.txt:hover {
background-size:20% 5%;
color:#000;
}
<div class="txt">Call to action</div>
I would wrap your .box and .txt in a container, and then when that container is hovered, do the transition. That way, your hover area isn't being resized - instead the contents are.
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position:absolute;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.container {
position: relative;
}
.container:hover > .box {
width: 50px;
height: 5px;
margin-top: 40px;
}
<div class="container">
<div class="txt"> Call to action</div>
<div class="box"></div>
</div>
View Updated CodePen
The trick is to apply the :hover to a surrounding element.
So you keep hovering over the element and just the included block will change.
FYI:
translate3d is used for better performance than normal translateX.
You could improve the code further. The red element could be a ::before element, and you might want to attach :focus, too for better accessibility. And maybe use a button element.
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.btn {
position: relative;
}
.btn-txt {
color: #fff;
text-align: center;
vertical-align: middle;
position: relative;
padding: 20px 30px;
}
.btn-box {
background-color: red;
transition: all 1s;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.btn:hover .btn-box {
width: 50px;
height: 5px;
transform: translate3d(50px, 0, 0);
top: auto;
}
<div class="btn">
<div class="btn-box"></div>
<div class="btn-txt">Call to action</div>
</div>