im triying to center this element in the screen, and also when i hover.
In my example below, the div is not centred, even when i hover it knowing that i made the transform 50% and top/left too, that's what i use uselly to center an element.
* {
box-sizing: border-box;
}
body {
position: relative }
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
transform: scale(.2) translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
the bug is in :hover selector because without translate() inside the transform, you basically reset it to 0 which isn't what you want.
because it will forget what was before and override it.
here is a simple solution here:
❌
.zoom:hover {
transform: scale(1.5);
}
✅
.zoom:hover {
transform:
scale(1.5)
translate(-50%, -50%); /* add this */
}
here is a simple explanation here:
Modern solution (less code):
using CSS grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid
with place-items it will center it automatically without the need for any transform or position... https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
also, you don't have to 0.2 the scaling at the start, just start at scale(1) and then make it bigger with a bigger scale in hover like 4 for example. (so it won't create that bug at the start of from 200px to 0.2scale transition without any hover)
however, if you want to make the CSS work also in IE and older browsers then is good to use position, and translate, top, left...
but your users are using a modern browser, so for readability and making a simpler use of flexbox or grid can be a great idea.
for any further info use https://caniuse.com (for example grid is 95% supported by any browser from 2020 one, and in chrome from 2017)
here the CSS grid solution
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
margin: 0;
}
.zoom {
background-color: green;
width: 50px;
height: 50px;
transition: transform 0.2s;
}
.zoom:hover {
transform: scale(4);
}
<body>
<div class="zoom"></div>
</body>
Keep in mind the order of the transforms determines how the element appears. You first move the element top: 50%; left: 50%;, which puts it in the bottom right quadrant. Then you make it smaller transform: scale(0.2) and then you move it left by 50% of its now smaller size translate(-50%, -50%).
By placing the translate first, the element is centered before becoming smaller. Remember to also include the translate(-50%, -50%) when you increase the size, as the consequent translates will overwrite the current one, not add to it.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
position: relative }
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
transform: translate(-50%, -50%) scale(.2);
position: absolute;
top: 50%;
left: 50%;
}
.zoom:hover {
-ms-transform: translate(-50%, -50%) scale(1.5); /* IE 9 */
-webkit-transform: translate(-50%, -50%) scale(1.5); /* Safari 3-8 */
transform: translate(-50%, -50%) scale(1.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
Put translate(-50%, -50%) before scale(0.2). Also, you need to include the translate(-50%, -50%) in your hover rule, otherwise it scales, but resets the translate part to its default.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
position: relative
}
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
transform: translate(-50%, -50%) scale(0.2);
position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
}
.zoom:hover {
-ms-transform: translate(-50%, -50%) scale(1.5);
/* IE 9 */
-webkit-transform: translate(-50%, -50%) scale(1.5);
/* Safari 3-8 */
transform: translate(-50%, -50%) scale(1.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
Related
When I am using this css to make an element center into a container then everything is ok except ie-11. In ie-11 a horizontal scroll apper bottom of the page. When i remove width:100% from this css then scroll remove but i need this width. you can see the problem in this page http://www.azayabeachresortgoa.com/wellness/
.box_center {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
z-index: 100;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-sizing: border-box;
width: 100%;
}
You can actually remove a lot of that stuff and end up with similar positioning, see
If you don't want to revisit that (I suggest you do), you can simply add:
body { overflow-x: hidden; }
Or add an overflow: hidden to one of the .box_center's closer relatives.
So, I have the snippet below and I'd like to add an anchor link to it. Unfortunately, there is no information on how to.
So, how do I add a link inside a data-marquee attribute?
<div class="marquee marquee-speed-normal"
data-marquee="Some text **I want to have a link in here** Some text">
</div>
Have a look at this...
An Anchor can in most cases be placed like this. There are loads of info out there with very little effort on finding them.
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="right" scrolldelay="300">
This link will take you to a page with what you need to know
</marquee>
<marquee direction="right" scrolldelay="300">
And this is why you should try not to use it.
</marquee>
</body>
</html>
Try this then. From what i've seen, the easiest way was to turn the entire marquee into a link like below. The reason seems to be that data-marquee prints the data and won't represent anything else.
It would be great cool to see if there is another way other than that to display a link within the marquee.
<a href="#1">
<h1 class="marquee marquee-direction-alternate" data-marquee="HTML5 marquee"></h1>
</a>
If you don't come right, I also found this very useful. Here i have done the same with CSS. This is still widely supported.
*/The behavior is determined with CSS*/
<style>
.scroll-slow {
height: 50px;
overflow: hidden;
position: relative;
background: yellow;
color: orange;
border: 1px solid orange;
}
.scroll-slow p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-slow 25s linear infinite;
-webkit-animation: scroll-slow 25s linear infinite;
animation: scroll-slow 25s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-slow {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
#-webkit-keyframes scroll-slow {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
#keyframes scroll-slow {
0% {
-moz-transform: translateX(100%);
/* Browser bug fix */
-webkit-transform: translateX(100%);
/* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
/* Browser bug fix */
-webkit-transform: translateX(-100%);
/* Browser bug fix */
transform: translateX(-100%);
}
}
</style>
*/ And then the anchor is done as follows */
<div class="scroll-slow">
<p>This is my link</p>
</div>
Ok Jim, a long shot
I Is this what you want to do?.
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>jQuery Marquee Plugin Example</title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
<style>
.marquee {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}
</style>
</head>
<body>
<div class="marquee">This is my link</div>
<script src="js/index.js"></script> </body>
</html>
index.js
$(".marquee").marquee({
//speed in milliseconds of the marquee
duration: 5000,
//gap in pixels between the tickers
gap: 50,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: "left",
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
I have been working in a pop up. It's centered vertically and horizontally in the main div. I have used the following code:
CSS
#pop-up {
background-color: #FFF;
display: none;
height: auto;
left: 50%;
margin: 0 auto;
position: fixed;
top: 50%;
width: 420px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
But everytime I hover the DIV, it get pixelated. I have been reading about it and it's a Google Chrome's bug. I have tried different solutions but it didn't help me out. So, can you help me to fix it?
I want one div in my page whose position will be fixed rotation is 30 degree but when I am doing this its shows like this
I Don't want that empty space in the top while rotation. I want Top same as bottom currently in top its showing some space when i rotate my div.
CSS is
#beta{
position:fixed;
bottom:0;
padding:-30px;
z-index: 1;
width: 15em;
height:3em;
background: #65a9d7;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
You can add transform-orign, which will act as rotating axis.
And if you want this to be at top then add top and remove bottom value and while rotating, the blocks shifts so give left value to the half of its height of appropriate value.
#beta{
position:fixed;
top:0;
z-index: 1;
width: 15em;
height:3em;
left: 1.5em;
background: #65a9d7;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: left top;
}
And one more thing, padding doesn't work with negative value. :)
Have a nice code day.
Take a look at the transform-origin CSS property if you want to set the point at which the object rotates around. In your specific example, the reason there is so much space above is because you've set bottom: 0, which will force a fixed element to snap to the bottom of its parent.
I'm not sure the exact layout you're looking for, but here is something with less white space at the top:
#beta {
position: fixed;
z-index: 1;
width: 15em;
height: 3em;
background: #65a9d7;
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
margin-top: 4em;
}
<div id="beta">
Beta Version
</div>
Edit: The following snippet is a follow-up to a comment from the original poster.
.container {
border: 5px solid #000;
height: 5em;
overflow: hidden;
position: relative;
width: 15em;
}
.beta {
background: #65a9d7;
height: 3em;
line-height: 3em;
margin-top: -1.5em;
position: absolute;
text-align: center;
top: 50%;
width: 15em;
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
}
<div class="container">
<div class="beta">
Beta Version
</div>
</div>
I am performing a CSS transform: rotate on a parent, yet would like to be able to negate this effect on some of the children - is it possible without using the reverse rotation?
Reverse rotation does work, but it affects the position of the element, and it may have a negative performance impact (?). In any case, it doesn't look like a clean solution.
I tried the "transform: none" suggestion from this question prevent children from inheriting transformation css3, yet it simply doesn't work - please see the fiddle here: http://jsfiddle.net/NPC42/XSHmJ/
May be you have to write like this:
.child {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Check this for more http://jsfiddle.net/XSHmJ/1/
Updated:
You can use:after & :before psuedo class for this.
check this http://jsfiddle.net/XSHmJ/4/
I believe that you are going to need to fake it using a second child, the specification does not seem to allow for the behavior you would like, and I can understand why the position of a child element has to be affected by a transform to its parent.
This isn't the most elegant of solutions, but I think you're trying to do something that the specification is never going to allow. Take a look at the following fiddle for my solution:
.parent {
position: relative;
width: 200px;
height: 150px;
margin: 70px;
}
.child1 {
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.child2 {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If you want to apply transforming effects on a parent without affecting its children, you can simply animate a parent's pseudo-element like this:
.parent {
display: inline-block;
position: relative;
}
.parent::before {
content: "";
background: #fab;
/* positioning / sizing */
position: absolute;
left: 0;
top: 0;
/*
be aware that the parent class have to be "position: relative"
in order to get the width/height's 100% working for the parent's width/height.
*/
width: 100%;
height: 100%;
/* z-index is important to get the pseudo element to the background (behind the content of parent)! */
z-index: -1;
transition: 0.5s ease;
/* transform before hovering */
transform: rotate(30deg) scale(1.5);
}
.parent:hover::before {
/* transform after hovering */
transform: rotate(90deg) scale(1);
}
This actually worked for me. JSFiddle