So I have two boxes called left panel and right panel and an overlay with position:absolute on top of right panel. There is a sign up button on right panel and on click I am adding a noghost class (so that the overlay is visible then).
What I am intending is the when I click on the button on the right side panel the overlay should translateX to the left. What I notice is that it happens instantaneously whenever this class comes up.
What am I doing wrong
Html
.overlay {
height: 100%;
width: 50%;
position: absolute;
left: 50%;
background: yellow;
top: 0%;
opacity: 0.7;
transition: all 1.8s linear;
z-index: 10;
}
.trigger.noghost .overlay{
transform: translateX(-250px);
}
<div
className={`trigger ${
activePanel === 'SignIn' ? 'noghost' : 'ghost'
}` }
>
<div className="overlay" />
</div>
The way I fix my issue was I did add a default position, like in your case:
transform: translateX(0);
This is also to help you understand what properties are changing in your element.
JSFiddle
CodeSandbox
Related
I've been in the process of making a customise-able tooltip for Vue using SCSS, allowing a developer to specify the colour and placement of the tooltip, which is constructed from a pair of ::before and ::after pseudo-elements in a button element of variable size. The ::before acts as the tooltip's arrow, and the ::after the tooltip content.
There's four placements I want to make possible: top, bottom, left and right. The following two groups of classes apply to the top and bottom positions:
.tooltip-placement-top, .triangle-placement-top {
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-top {
bottom: calc(100% + 10px); // 3. 100% here is parent height, key point
}
.triangle-placement-top {
bottom: calc(100%); // 4. no need add 5px, because transparent border also takes place
border-top-color: var(--tooltip-border-color);
}
.tooltip-placement-bottom, .triangle-placement-bottom {
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-bottom {
top: calc(100% + 10px); // 3. 100% here is parent height, key point
}
.triangle-placement-bottom {
top: calc(100%);
border-bottom-color: var(--tooltip-border-color);
}
and these result in a centred tooltip above and below the button like so:
The next stage is to position the left and right hand tooltip classes to sit aligned with the horizontal centre of the button, but conforming to the left or right edge of the button rather than the top and bottom, as seen here:
Both the button and tooltip are likely to appear as different sizes depending on their context of use, so unfortunately this needs to be a scalable solution (i.e. increasing the size of either button or tooltip won't cause them to fall out of alignment). My current attempts to adapt the code has made the tooltip appear at 100% of its own width right of the button, which as you can imagine looked terrible.
Sorry I don't have screen-caps to share, but I hope the drawings make it clear what I'm trying to achieve! If you need any additional code then I can supply it, but the question was getting quite bulky as it is.
Sorted it!
Here's what I have for my right and left classes:
.tooltip-placement-left, .triangle-placement-left {
top: 50%;
}
.tooltip-placement-left {
right: 100%;
transform-origin: right;
transform: translate(-12px, -50%);
}
.triangle-placement-left {
right: 100%;
transform: translate(8.3px, -50%);
}
.tooltip-placement-right, .triangle-placement-right {
top: 50%;
}
.tooltip-placement-right {
left: 100%;
transform-origin: left;
transform: translate(12px, -50%);
}
.triangle-placement-right {
left: 100%;
transform: translate(-8.3px, -50%);
}
the exact distances in pixels depend on the dimensions of your tooltip arrow, but this is what worked for me. Hope it helps someone else!
i would like to put the button into the middle of the height of the page
i tried this :
top: 50%;
but it doesnot work i found here that have to push top margin
i found a code : margin-top: -300px;
can i use something like margin-top : -width:50% this would mean that the button will be in the middle , how can i code it ?
how to 100% center it , and then put the button under that so the firt will be 50% and the second 60% even if i resize the window
You can simply do this by positioning it absolute in its parent element and then you can center the button by translating it.
HTML
<body>
<div class="container">
<button>Centered button</button>
</div>
</body>
CSS
html, body {
height: 100%;
margin: 0;
}
.container {
position: relative;
height: 100%;
}
button {
position: absolute;
top: 50%; //50% from top
left: 50%; //50% from left
//translate it so 50% from the width and heigth of the button will be subtracted thus centering the button
transform: translate(-50%, -50%);
}
Working js fiddle here. Don't forget to add vendor prefixes!
Another option would be flexbox. You can find more information about flexbox centering here.
I am trying to create a slide in navbar to my website but I have noticed that when I click on the "icon button" to open the nav that if scroll on the page the nav disconnects from the menu and scrolls with the content. I am sorta new at bootstrap and I am not exactly sure what is causing this.
I have tried to change
.side-collapse-container {
width:100%;
--> position:relative;
left:0;
transition:left .4s;
}
to
.side-collapse-container {
width:100%;
--> position:fixed;
left:0;
transition:left .4s;
}
However the fixed causes a different issue. When the fixed is add I am now unable to scroll any of the content when the "icon button" has not been clicked. The content seems to be "locked"
Can someone please advise how I can correct this?
Sample is located here -- https://stevia-affirm.codio.io/DaveTest.html
Thank you for any help you can give.
When the navigation goes mobile in the media query, use this:
.side-collapse {
left: 0;
overflow: hidden;
position: absolute;
top: 50px;
transition: width 0.4s ease 0s;
width: 250px;
z-index: 100;
}
because you have fixed-positioned navbar, it is sticking to the bottom, once it's position changes to absolute and top-height is changed, it works just fine.
I have been experimenting and trying but have not been able to achieve the following. I'm sure the solution is simple, but I haven't hit it yet.
Let's say I want to animate an element (eg. div) when I apply a class (eg. active). And I want to reverse the animation when I remove the class (or toggle with another).
The properties I would like animate are scale (transform) and opacity.
Also, when entering the page, the element will not have any class, and should snap to its state, and not animate. It should only animate when explicitely adding or removing the class.
jsfiddle: http://jsfiddle.net/bertvan/9r98w/
HTML:
<div id="the-div"></div>
Trigger
JS:
$(function(){
$("a").click(function(){
$("#the-div").toggleClass("active");
});
});
CSS:
#the-div{
width: 200px;
height: 200px;
background-image: url("http://placeimg.com/200/200/any");
-webkit-transform: scale(0.7);
opacity: 0.5;
}
#the-div.active{
/* animate scale & opacity */
-webkit-transform: scale(1);
opacity: 1;
}
You are missing a transition property on the div selector:
running demo
code added:
#the-div{
transition: all 2s;
}
This is an example of a code to toggle class for changing size of a div with the transition-animation.
The HTML:
input-button with id="setRemoveClassBtn"
a div-tag with id="div1"
You will need a CSS-class-definition (notice that this is with the moz-prefix made to work in Firefox):
div{
width: 150px;
height: 150px;
background-color: rgb(250, 250, 150);
-moz-transition: width 5s, height 5s;
}
div.bigSizeDivs{
width: 250px;
height: 250px;
}
You will have to use javascript/jQuery to add/remove class. Here is an example with jQuery
$("#setRemoveClassBtn").click(function(){
$("#div1").toggleClass("bigSizeDivs");
});
I wanted to add an overlay to an image if they hovered over the image.
I have tried plenty of ways but the image just seems to disappear or stay the same.
This is what it will be like
<a id="icon"
style="background: url(/images/layout/top/icon.gif); height:23px; width:23px; float:left; margin-right:3px;"
href="page.php?pageid=123" title="Icon">
</a>
Really and truly, what I am after is a quick way to have the image change without having to make more images.
So when not hovering over the image - Original image
When hovering over the image - 40% color overlay?
Thanks in advanced.
What I tried:
a.thumbnail {
background-color:orange;
filter: Alpha(Opacity=40, Style=0);
-moz-opacity: 40%;
opacity: 0.4;
}
I created a little fiddle that has this doesn't overlay, but gives the same effect using just CSS. Plus, I threw in some CSS transitions for fun. Basically creating a div behind the image that is revealed via pseudo element hover. This way you can drop in your tags still without needing to create CSS background images like crazy. Just swap out the alpha stuff to make the overlay work the other way.
http://jsfiddle.net/wesleyterry/jwXvA/#base
Hope that is what you were looking for.
Basically, if it's an overlay you can assume the height and width is probably going to be the same.
in this demo i accidentally used images sized 25. change to 23
http://jsfiddle.net/raU2J/7/
<div class="overlay_wrapper">
<div class="overlay"></div>
<img src="cake.jpg" />
</div>
.overlay,
.overlay_wrapper a,
.overlay_wrapper {
width: 25px;
height: 25px;
position: relative;
}
.overlay_wrapper a {
position: absolute;
z-index: 10;
display: block;
}
.overlay {
display: none;
background: red;
position: absolute;
top: 0;
left: 0;
filter: Alpha(Opacity=40, Style=0);
-moz-opacity: 40%;
opacity: 0.4;
z-index: 9;
}
jquery:
$(".overlay_wrapper").hover(
function () {
$(this).find('.overlay').fadeIn();
},
function () {
$(this).find('.overlay').fadeOut();
}
);
This is not possible with just the single <a>, but you can put the <a> in a container (a span or a div). Give the container the desired background, and give a:hover a background color like rgba(255, 255, 255,.4).
If that doesn't work like you want, explain more about your requirements.
The sample demo:
html
<div class="img"><div class="overlap"></div></div>
css
.img {width:100px;height:100px;background:red;position:relative;}
.overlap { visibility:hidden;}
.hover .overlap {position:absolute;top:0;left:0;width:100px;height:100px;background:#333;filter:alpha(opacity=40); /* for IE */ -moz-opacity:0.4; opacity: 0.4;-khtml-opacity: 0.4; visibility:visible;}