I'm attempting to create a menu that I can use for a website.
I have a nice little graphic for the menu button in the top left corner, and it works when you hover over the bars themselves.
Why is the transition not running while the mouse is hovering over the menu but does when the mouse is over the bars?
css --
.bars:hover .line-top { transform: translateY(9px) rotateZ(45deg); }
.bars:hover .line-middle { transform: rotateZ(135deg); }
.bars:hover .line-bottom { transform: translateY(-9px) rotateZ(135deg); }
.menu-holder:hover ~ .bars .line-top { transform: translateY(9px) rotateZ(45deg); }
.menu-holder:hover ~ .bars .line-middle { transform: rotateZ(135deg); }
.menu-holder:hover ~ .bars .line-bottom { transform: translateY(-9px) rotateZ(135deg); }
.menu-holder {
width: 200px;
position: absolute;
top: 0;
left: -150px;
height: 100vh;
background: red;
transition: transform 1s;
}
.bars:hover ~ .menu-holder{
transform: translateX(150px);
}
.menu-holder:hover {
transform: translateX(150px);
}
.line-top, .line-middle, .line-bottom {
width: 30px;
height: 8px;
border-radius: 28px;
background: black;
margin: 1px;
transition: transform 1s;
}
.bars {
width: 30px;
z-index: 2;
position: absolute;
}
html --
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="bars">
<div class="line-top"></div>
<div class="line-middle"></div>
<div class="line-bottom"></div>
</div>
<div class="menu-holder slider">
</div>
<!-- <script src="script.js"></script> -->
</body>
</html>
P.S. I'm very new to CSS and it may just be a simple mistake
CSS selectors go in one direction. .a ~ .b means "every .b element after .a elements will have the subsequent properties applied to said .b elements". So, your .menu-holder:hover ~ .bars has no effect, as there are no elements with class bars after your menu-holder element.
Related
i want to make a 3d scene made out of squares and then move around without addons
then i started by watching a video about html and 3d graphics, i made this and i have been stuck for 2 days trying to animate the scene, i have tried with javascript to detect the mouse or keyboard but im unable to make it work, im new to css, html and java
i use visual studio code
<!DOCTYPE html>
<html>
<head>
<title>engine 1A</title>
<style>
html, body {margin: 0; padding: 0;}
body {background: black; overflow: hidden;}
#scene
{
perspective: 800px;
transition-duration: 5s;
transition-delay: 2s;
transition-timing-function: linear;
transition-property: width;
}
#keyframes roll {
from {
transform:rotateX(0) rotateY(0);
}
to {
transform:rotateX(360) rotateY(360);
}
}
#mainD
{
width: 500px;
height: 500px;
margin: 200px auto;
}
#boxD
{
width: 500px;
height: 500px;
}
#boxD div
{
position: absolute;
border: 1px solid white;
width: 500px;
height: 500px;
transform-style: preserve-3d;
}
#ZB
{
transform: translateZ(250px) rotateY(180deg)
}
#ZP
{
transform: translateZ(-250px)
}
#XB
{
transform: translateX(-250px) rotateY(90deg)
}
#XP
{
transform: translateX(250px) rotateY(-90deg)
}
#YB
{
transform: translateY(-250px) rotateX(90deg)
}
#YP
{
transform: translateY(250px) rotateX(-90deg)
}
</style>
</head>
<body>
<div id="scene">
<div id="mainD">
<div id="boxD">
<div id="ZB"></div>
<div id="ZP"></div>
<div id="XP"></div>
<div id="XB"></div>
<div id="YP"></div>
<div id="YB"></div>
</div>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
I want to know how I can make the background image of something the selection area because my background image is a triangle and I want the selection area to be a triangle. (CSS)
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>h1{background-image: url(image.png)}</style>
<body>
<h1>Hello</h1>
</body>
</html>
i want that image.png to be the hovering/selection/trigger area for that link, i want this because i have a triangle as a background image and i want the hovering area to be a triangle as well.
then you'll have to use a : selector in your css
For example: NOTE . for Classes and # for ids
.example-image: hover {
//style to show when mouse hovers
}
Resources:
https://www.w3schools.com/cssref/sel_hover.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
https://www.w3schools.com/howto/howto_css_image_overlay.asp
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
I am just trying to rotate this element whenever the mouse hovers on it. but it also changes its position. please let me know what's the problem in this code. I am not getting why this happens. Anyone, please help. Any documentation is also accepted.
below is my code.
body{
background-color: black;
color:white;
height: 100vh;
}
.spinner{
height: 150px;
width: 200px;
display: inline-block;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background-color: blue;
border-radius: 50%;
transition:transform 1s ease-in;
}
.spinner span{
display: inline-block;
font-size: 1.7em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 500;
}
.spinner:hover{
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spinner</title>
<link rel="stylesheet" href="spinner.css">
</head>
<body>
<div class="spinner">
<span>Click me</span>
</div>
</body>
</html>
This happens because you are losing the main transform property from the .spinner element.
.spinner{
transform: translate(-50%,-50%);
}
.spinner:hover{
transform: rotate(180deg);
}
When you hover, your translation property is replaced with the rotation one.
In order to get this to work you need two stack the two transforms in one line, like this:
.spinner:hover{
transform: translate(-50%,-50%) rotate(180deg);
}
Just try changing the values of position and the display property and it will work hopefully.
I am in quite a pickle...
So here is my situation, I want to make a moving animation when the mouse hovers over it.
When this happens, I would like text that is layered over this div to remain in the same position.
In my setup, I have a parent div that controls the yellow div inside it when the mouse hovers over it. Also inside the parent div is the text that I would like to position over the edge of the yellow div and remain static during the animation.
html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
css:
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
width: 100%
}
.yellow {
display: inline-block;
left: 20%;
height: 7%;
position: relative;
transition: transform 0.4s ease;
transform-origin: right;
transform: scaleX(0px);
width: 80%;
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
This is what it is making
No matter what I do I simply cannot find a way to put the text over the moving divider without it:
Not staying on the same x plane as the moving div
Being transformed with the moving div
Wish this is what you looking for. If you didn't want the text to move you should add position absolute to your yellow div and also relative position to your parent div. then you can position the yellow div as you want. Also, you should put the width: 80%; before your scaleX(0) so that transform can work and also you should give the scaleX transform, 0 as a value, not 0px.
Run the snippet to see the result.
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
position: relative;
padding: 10px;
}
.yellow {
position: absolute;
left: 20%;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 80%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
I have made a rough snippet for the use case please build on top of it.
.relative{
position:'relative';
width:150px;
height:50px;
}
.static{
position:absolute;
}
.hoverable{
width:100%;
height:100%;
background-color:yellow;
transition:transform 1s;
}
.hoverable:hover{
transform:translate(150px,0px);
}
<div class='relative'>
<div class='static'>Static Text</div>
<div id='yellow' class='hoverable'/>
</div>
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
/*added this class*/
.child-1 {
position: absolute;
z-index: 10;
}
#yellow-con {
background-color: #000000;
position: relative;
height: 25px;
}
.yellow {
position: absolute;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 100%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(1);
}
#yellow-con:hover b {
color: black;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div id="yellow-con">
<div class="child-1"><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
I would like to include the mouseover 'Shop Now' effect on my images, I used this code:
<!DOCTYPE html>
<html>
<style>
.container {
style= "width:300px;height:300px;"
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
But when I run it on my site the scroll effect works for all 3 images at the same time. As shown below:
What can I do to solve this problem? I have been told previously that if I change the container size to just fit the image it should work, but how would I do that?
<!DOCTYPE html>
<html>
<style>
.container {
width:300px; /*edited here*/
height:300px;
/*this syntax is for html tags ONLY: style= "width:300px;height:300px;"*/
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
you used the wrong syntax for css. style= "width:300px;height:300px;" would be correct if it was in your html like so:
<div class = "container" style= "width:300px;height:300px;"></div>
but in css the style is already implied throught the tags so in css all you need to do is:
.container{
width:300px;
height:300px;
/*and so on*/
}
note: to avoid future problems learn about chrome's inspect tool. It will help you get a better understanding of your page layout and the size of elements and what not. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Few short notes:
U cannot use style= "width:300px;height:300px;" within css. Within your example, your first line should be:
.container {
width:300px;
height:300px;
left:0;
Right:0;
}
You can only use the style-attribute within your html, but it is not nessesairy. If you do this, it will bypass your css:
<div class="container" style="width:300px;height:300px;">
You furthermore don't really have to call width and height both, since an image will scale automatically when it has one of these.
With all this being said, I believe this code solves your problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
width: 200px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: green; /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
</body>
</html>