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.
Related
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.
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 have simple html doc with a small amount of css. The transform works but not the transition I have tried numerous things and its looks like an exact copy of a tutorial I'm watching, is there something wrong with the syntax that I keep missing or is there something else that's causing it not to work?
<!DOCTYPE html>
<html>
<head>
<title>transition Learning</title>
<meta charset="utf-8">
<style>
#testItem{
background-color: blue;
width: 80px;
height: 80px;
margin: 300px auto;
transition: transform 600ms ease-in-out;
transform: translate(200px,200px) rotate(45deg);
}
</style>
</head>
<body>
<div id="testItem"></div>
</body>
</html>
Because you don't have anything transitioning? (Click on the box)
document.getElementById("testItem").onclick = function () {
this.classList.toggle('transition');
}
#testItem.transition {
transform: rotate(90deg);
}
#testItem{
background-color: blue;
width: 80px;
height: 80px;
margin: 300px auto;
transition: transform 2s ease-in-out;
transform: translate(0,0) rotate(45deg);
}
<div id="testItem"></div>
Is there a fix for cropping a round image from a square one that will get rid of my white border left behind.
I am trying to use animation css to rotate an earth image in a stary sky. Right now, I am struggling with a white border left over from cropping my image.
I don't have Photoshop right at the moment and I am having a hard time finding a free photo editor that will suffice. My macbook air 2016 model is supposed to have this feature in the preview mode, but it is not high-lit thus unavailable and I don't know why. Any help would be so appreciated it is ridiculous!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--animationlibrary githib url-->
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"/>
</head>
<body>
<div>
<img id="starrySky" src="img/stary_nebula.jpg" alt=""/>
</div>
<img id="earth" name="earthRotate" src="img/my_round_earth.jpg" alt=""/>
<style>
img{
position: absolute;
left: -10px;
top: -15px;
height: 175px;
width: 175px;
}
**this is what I have now....**
div#earth{
transform: skew(20px, -10px);
transform: rotate(45deg);
border-radius: 50%;
overflow: hidden;
width:150px;
height:150px;
}
img#earth{
background-image: url("https://s.yimg.com/fz/api/res/1.2 /oaK.yDOhW_y44_tplykRWA--/YXBwaWQ9c3JjaGRkO2g9MTE2ODtxPTk1O3c9MTcwMA--/http://www.heavensgloryobservatory.com/Color_Jpegs/ngc2244NB03.jpg");
}
#earth{
position: absolute;
top: 0px;
left: 600px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
border-radius: 50%;
-webkit-animation-name: earthOrbit;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 10s;
overflow: visible;
}
#-webkit-keyframes earthOrbit{
from{ -webkit-transform: rotate(0deg); }
to{-webkit-transform: rotate(360deg);}
}
#starrySky{
position: relative;
top: -10px;
left: -10px;
width: auto;
height: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
text-align: center;
font-size: 25px;
}
</style>
</body>
</html>
just specify what size the parent <div> has and use overflow: hidden if necessary.
extra: to crop in different shapes, just transform the parent <div>, e.g.:
transform: skew(20px, -10px),
transform: rotate(45deg),
border-radius: 50%
I've made a simple under construction website which has an image and some text centred in the middle of the page like following:
HTML Code:
<body>
<div id="container">
<span id="wip">Under Construction</span>
<img id="image" src="katte.jpg">
<span id="text">Glæd dig, her åbner katteboxen.dk i foråret 2015. Vi glæder os til at forkæle din kat med en spændende pakke hver måned.</span>
</div>
</body>
CSS Code:
body {
margin: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
text-align: center;
}
#container {
max-width: 1230px;
width: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#image {
width: 100%;
}
#text {
font-size: 20px;
padding: 0 15px;
display: block;
}
#wip {
font-size: 40px;
padding: 0 15px;
display: block;
}
Link: http://katteboxen.dk/
Everything is working good except when it comes to iPads. The content is showing like when for example the css rule transform: translate(-50%, -50%); wasn't applied for the container. What are the alternatives for fixing this issue? Any guidance or feedback is more than welcomed.
You might need to try browser specific prefixes for transform property, so:
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
should do the trick.
For reference have a look here
transform property are browser based property set -webkit-transform, -moz-transform, -o-transform .... ans so set it according to your i-pad browser i this it will solve the problem
or just use
margin-left:-50%;
margin-top:-50%;