I was able to transition text-align from center to left. With this code, if you run it, then hover over, you'll see the top one goes to the left. However the bottom overflows on the right; how can I figure out how to make the transition to right not overflow?
Note: This is a demo of my real application, which has strings/elements of unknown/variable width, from 1 to anything to fill a single line (no wrapping).
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title {
text-align: center;
}
.menu {
text-align: center;
}
.trans-left {
transition: margin-right 1s;
}
.trans-right {
transition: margin-left 1s;
}
.header:hover .trans-left {
margin-right: 100%;
}
.header:hover .trans-right {
margin-left: 100%;
}
<body>
<div class='header'>
<div class='title'>
<span class='trans-left'>This one goes left</span>
</div>
<div class='menu'>
<span class='trans-right'>This one goes right</span>
</div>
</div>
</body>
You're aligning the text elements like this:
margin-left: 100%;
margin-right: 100%;
This positions each element – from the starting point of the box – to the left and right edges.
Hence, the left edge of the left-moving box will align with the left edge of the container.
And the left edge of the right-moving box will align with the right edge of the container. This causes the rest of this box to overflow.
Try this instead:
margin-right: 90%; /* adjust as needed */
Edit based on revised question
Here is an alternative solution that works regardless of content width.
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title, .menu {
text-align: center;
position: relative;
width: 100%;
height: 50px;
}
.trans-left {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: 1s;
}
.trans-right {
position: absolute;
right: 50%;
transform: translateX(50%);
transition: 1s;
}
.header:hover .trans-left {
left: 0;
transform: translateX(0);
transition: 1s;
}
.header:hover .trans-right {
right: 0;
transform: translateX(0);
transition: 1s;
}
<div class="header">
<div class="title">
<span class="trans-left">This one goes left</span>
</div>
<div class="menu">
<span class="trans-right">This one goes right</span>
</div>
</div>
More details: Element will not stay centered, especially when re-sizing screen
Related
Here is a link to a demo
I'm not sure what I'm missing, I've done this before a few times but It's been a day of fighting this particular CSS. I want the image to enlarge, but stay within the dimensions, so a zoom effect versus any enlargement. I've attempted to move the overflow:hidden into other parent or children, but it doesn't have an effect. I've played around with the display settings as well.
Any advice? The JSfiddle link is above, and the code below. Thanks for taking a look!
#purple-square {
width: 355px;
height: 255px;
background-image: url("../img/website_cards/purple_card.png");
border-radius: 10px;
}
#migraine-dentistry {
width: 355px;
height: 255px;
background-image: url("../img/website_cards/migraine_dentistry_card.png");
border-radius: 10px;
}
/* need position: relative in shell otherwisee the elements disappear */
#shell {
margin: auto;
width: 355px;
height: 255px;
position: relative;
transform-origin: center;
transition: 0.3s ease-in-out;
}
#shell:hover {
transform: scale(1.2);
}
#container {
width: 100%;
overflow: hidden;
display: inline-block;
transition: 0.3s;
margin: 0 auto;
}
#container div {
position: absolute;
left: 0;
transition: 0.3s ease-in-out;
}
#container:hover {
transition: ease-in-out 0.3s;
}
#container div.bottom:hover {
opacity: 0;
}
and here is the HTML setup:
<body>
<div id="shell">
<div id="container">
<div id='purple-square' class="top"></div>
<div id='migraine-dentistry' class="bottom"></div>
</div>
</div>
</body>
Full working code snipped below my steps
remove unnecessary elements Removed purple square, because it's never seen in wanted animation.
Removed the part the full #container div.bottom:hover part.
Removed every style that begins with #shell in the css and later trigger the animation on #container:hover.
main issue Add an #migraine-dentistry after the #container:hover animation, so if someone hovers the container it effects the #migraine-dentistry element. (#container:hover #mi.. {trans..})
In this (#container:hov..) element remove everything and
insert transform: scale(1.2);
because we just want to scale if user is hovering.
Remove whole #container div {..} style element, because we will directly add these styles to the #migraine-dentistry element.
In #container define px values for
> width: 355px; and height: 255px;
just because we not use the #shell element anymore. Also
> set position: relative; and z-index: 2;
that the #migrain.. element is inside his parent. And
> set border-radius: 15px;
for styling. Finally
>remove the display and transition values
because they are simply not needed.
last In #migraine-de.. styles
>set width: 100%; and height: 100%;
to fit div to parent.
> remove border-radius tag
because it's set by the #container
> add transition: 0.3s ease-in-out;
to transition like you wanted.
#container {
border-radius: 15px;
width: 355px;
height: 255px;
overflow: hidden;
z-index: 2;
position: relative;
}
#container:hover #migraine-dentistry {
transform: scale(1.2);
}
#migraine-dentistry {
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
background-image: url('https://images.unsplash.com/flagged/photo-1563248101-a975e9a18cc6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
}
<body>
<div id="shell">
<div id="container">
<div id='migraine-dentistry' class="bottom"></div>
</div>
</div>
</body>
I know these long nights where you just can't get it done.
I am attempting to left align text in a div that takes the full width of it's parent.
This is the structure of one of several links created using Angular's Flex Layout.
<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
<a mat-flat-button color="primary" fxFlex href="https://example.com/">
<div class="hoverOff"><fa-icon [icon]="faToolbox"></fa-icon>Broken</div>
<div class="hoverOn">
<div class="text">
Is your request causing an impact to a business-critical function, which is impacting daily production?
</div>
</div>
</a>
......
</div>
Without hovering, the .hoverOff element is visible. During hover, the .hoverOn element slides over the .hoverOff element.
.hoverOn uses position: absolute to stay hidden until hover.
Adding text-align: left to .text left aligns the text like I want but it's on the left edge of the div and not in the center with margins like I would like.
I have created an example for this and the CSS is below.
a {
color: white !important;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
a .hoverOn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00539b;
overflow: hidden;
height: 0;
border-radius: 4px;
width: 99%; /* Prevents flicker on bottom corners */
margin: 0 auto; /* Centers div for new width */
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Material's Standard easing */
}
.text {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: relative;
padding: 5px;
text-align: left;
}
a:hover .hoverOn {
height: 100%;
}
How can I solve this?
I'm trying to force changing property position to change after certain part of time (after all animations will end). For this I've created sample codepen so you can see what I've already achieved (more-less):
transition: width 0.5s ease-in, height 0.5s, position 0s ease 0.6s;
https://codepen.io/anon/pen/xpQdZm
As you can see hovering on the green container triggers transition of inside container grow (from right to left). What I would like to do is to make the container decrease when we remove the hover effect but to keep the position set to absolute while transition still lasts but set position to static after all transitions ends.
The more illustrative example can be see here: https://codepen.io/anon/pen/VyVzed
Because of the changing of position from absolute to static when hover is missing, the images are flickering and it looks so ugly.
.container {
display: flex;
flex-direction: row;
width: 800px;
}
.container div {
position: relative;
flex: 1;
}
.container div img {
width: 200px;
transition: width 0.5s ease-out;
z-index: 100;
}
.container div img:hover {
height: 200%;
position: absolute;
width: 200%;
left: 0;
right: auto;
top: 0;
bottom: auto;
z-index: 200;
transition: width 0.5s ease-out;
}
.container:nth-of-type(even) div img:hover {
bottom: 0;
top: auto;
}
.container div:nth-of-type(even) img:hover {
left: auto;
right: 0;
}
<div class="container">
<div>
<img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
</div>
<div>
<img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>
<div>
<img src="http://images4.fanpop.com/image/answers/177000/177769_1287459785835_400_300.jpg">
</div>
<div>
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
</div>
</div>
<div class="container">
<div>
<img src="http://images4.fanpop.com/image/answers/177000/177769_1287459785835_400_300.jpg">
</div>
<div>
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
</div>
<div>
<img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
</div>
<div>
<img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>
</div>
I know I can set div to fixed height but the problem is I want images to be scaled by its width.
Instead of thinking about changing position why not changing how the animation works. You may try the use of scale and adjust transform-origin to decide how the image should move (and also optimize your markup)
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 400px;
}
.container img {
width: 100px;
height: 100px;
transition: 0.5s ease-out;
transform-origin: top left;
}
.container img:nth-child(even) {
transform-origin: top right;
}
.container img:nth-child(2n+5) {
transform-origin: bottom left;
}
.container img:nth-child(2n+6) {
transform-origin: bottom right;
}
.container img:hover {
position: relative;
z-index: 2;
transform: scale(2);
}
<div class="container">
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/150/150/">
<img src="https://lorempixel.com/200/200/">
<img src="https://lorempixel.com/300/300/">
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
<img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
<img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>
I have a container div for the main content but am trying to have a sidebar float to the left of it. For example (http://www.bureautonic.com/en/) the menu button.
This is the code
.main-wrapper {
position: relative;
top: 50%;
height: 500px;
}
.container {
position: relative;
height: 100%;
}
.body {
height: 100%;
}
.slider {
display: block;
width: 940px;
height: 500px;
margin-right: auto;
margin-left: auto;
float: none;
}
.img {
position: absolute;
width: 100%;
height: 100%;
max-height: 100%;
}
.tagline {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
display: block;
width: 332px;
margin-right: auto;
margin-left: auto;
padding: 1em 3em;
border: 1px solid white;
-webkit-transform: translate(-50%, 0px) translate(0px, -50%);
-ms-transform: translate(-50%, 0px) translate(0px, -50%);
transform: translate(-50%, 0px) translate(0px, -50%);
font-family: 'Josefin Sans', sans-serif;
color: white;
text-align: center;
text-decoration: none;
text-transform: none;
}
.header {
margin-top: 33px;
margin-bottom: -61px;
}
.brand {
font-family: Cardo, sans-serif;
text-align: center;
}
<body class="body">
<div class="w-section container">
<div class="w-container header">
<h1 class="brand">The One And Only</h1>
</div>
<div class="w-container main-wrapper">
<div data-animation="outin" data-duration="500" data-infinite="1" data-easing="ease-in-cubic" data-hide-arrows="1" class="w-slider slider">
<div class="w-slider-mask">
<div class="w-slide slide">
<div class="tagline">
<h1>Marc Cain</h1>
<h3>F/W 2015-16</h3>
</div>
<img width="846" src="http://uploads.webflow.com/567a26541a69a693654038a1/567b15da06a9675444fc740d_marc_cain_campaign.jpg" class="img">
</div>
</div>
<div class="w-slider-arrow-left">
<div class="w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
<div class="w-icon-slider-right"></div>
</div>
<div class="w-slider-nav"></div>
</div>
</div>
</div>
</body>
I'm using webflow and uploaded the site for you guys http://the-one-and-only.webflow.io/
I originally tried making another absolute div with a set width and 100% height, but the menu button wasn't relative to the main container. Any help would be appreciated.
Give this a look, it mimics what http://www.bureautonic.com/en/ has for their menu
$(function() {
$('#menu-container').click(
function() {
ToggleMenu();
}
);
});
function ToggleMenu() {
var $menu = $('#menu');
var newleft = +$menu.css('left').replace('px', '') <= -150 ? '0' : '-300px';
$('#menu').css('left', newleft);
}
#menu,
#content {
width: 300px;
height: 200px;
}
#menu-container {
display: inline-block;
height: 200px;
width: 30px;
background-color: yellow;
position: relative;
}
#menu {
display: inline-block;
position: absolute;
}
#content {
display: inline-block;
position: relative;
overflow: hidden;
background-color: red;
}
#menu {
transition: left 1s;
left: -300px;
background-color: orange;
}
#menu-label {
-moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
position: absolute;
top: 50%;
text-align: center;
width: 200px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="menu-container">
<div id="menu-label">
This is my Menu Label
</div>
</div>
<div id="content">
This is the content
<div id="menu">
Menu
</div>
</div>
For the sliding menu
The basic concept is a parent div with position:relative and overflow:hidden , and a child div with position:absolute, beginning with a negative left equal to the width of the div
I used the css transition property for the smooth slide effect
Edit:
For the left aligned & rotated menu label
This effect is created with a combination of several properties.
My code block has been updated with the appropriate css.
See here http://jsfiddle.net/CCMyf/79/ (not my fiddle) for alterations
to the css if you need to have a dynamic height
If you want to float a menu to left of the main content, you need to firstly create the menu element that you want to be the menu (obviously), then float it to the left with float: left. e.g.
HTML
<div class="floated-menu">
Menu
</div>
CSS
.floated-menu {
float: left;
width: 50px;
height: 600px;
background-color: #ccc;
}
Then you have to float the main content container as well. .e.g
.container {
float: left;
position: relative;
width: 800px;
height: 100%;
}
I could be wrong, but I believe if you don't float both the items, the normal (non-floated context) behaviour of the container divs display: block; property kicks in and it will move down the page to the next "line". Which is weird because all items next to something thats floated should lose their display block behaviour and sit next to the floated item - i.e. float was originally intended to make block type headings and paragraphs sit next to pictures like in a magazine or newspaper, but yep, welcome to the world of CSS - you fill find many nonsensical things like this.
Also, the combined width of both floated elements border box (the widest and largest of the boxes that an element is contained in) cannot be wider than their parent element - other wise the second element will drop down to the next line - which actually does make sense. I have reduced the sizes for you in my demo, but you will have to manage that as you build your page.
You also need to remember that, by default the browser uses the
"content-box" box-sizing property. from the docs
content-box
This is the default style as specified by the CSS standard. The width
and height properties are measured including only the content, but not
the padding, border or margin. Note: Padding, border & margin will be
outside of the box e.g. IF .box {width: 350px}; THEN you apply
{border: 10px solid black;} RESULT {rendered in the browser} .box
{width: 370px;}
Here is a demo - http://codepen.io/anon/pen/QyKyVV?editors=110
I have this pen: http://codepen.io/helloworld/pen/VYWGbz
I have set these classes in my production code and they cause IE 11 to NOT render somehow the left black border WHEN the drawer is opened.
When I remove the vertical-alignment with table/table-cell as display property the error disappears... (In Chrome its fine...)
What choice do I have else to vertically align the drawer`s glyphicon/span instead of using table on parent and table-cell on child to make vertical align possible with middle?
Note: The drawer/sidebar always have a height of 100% recieved by its parent.
.drawer-left-trigger{
display:table;
}
.drawer-left-trigger > span{
display:table-cell;
vertical-align:middle;
}
HTML
<div id="idtView">
<div style="height:100%;background:blue;" class="col-xs-3">
test1
</div>
<div style="height:100%;background:yellow;" class="col-xs-4">
test2
</div>
<div id="availableSidebarColumn" style="background:orange;padding:0;height:100%;" class="col-xs-1">
<div class="drawer-wrapper">
<div id='drawer-left' class='closed'>
<div class='drawer-left-trigger'>
<span class='glyphicon glyphicon-chevron-left'></span>
</div>
<div class='drawer-left-content'>
<div style="background:orange;;" id="availableCommandsPagerNavigation">
<span class="previous disabled glyphicon glyphicon-chevron-left availableOptionsArrow availableOptionsPagerArrow"></span>
<span class="glyphicon glyphicon-chevron-right availableOptionsArrow availableOptionsPagerArrow"></span>
</div>
<div style="background:gray;" id="availableCommandsContainer">
contentcontentcontentcontentcontentcontentcontent contentcontent content
</div>
</div>
</div>
</div>
</div>
<div style="height:100%;background:pink;" class="col-xs-4">
test2
</div>
</div>
CSS
/*new stuff*/
*{
box-sizing: border-box;
}
.drawer-wrapper{
margin: 0 200px;
display: inline-block;
}
/*The left drawer*/
#drawer-left{/*set a container with the total width of both the container and the trigger*/
position: relative;
height: 100%; width: 205px;
overflow: hidden;
transition: all .35s ease-in-out;
}
#drawer-left:after{/*this will the right border, when the content will be pushed out*/
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
border-right: 1px solid #000;
}
.drawer-left-trigger{
/*set the triggers width here, borders etc.*/
position: absolute;
top: 0; bottom: 0; right: 100%;
margin-right: -25px;/*bring it back inside the wrapper*/
width: 25px;
background:yellow;
/*some styling stuff*/
cursor: pointer;
text-align: center;
font-size: 24px;
line-height: 100%;
}
.drawer-left-trigger > span{
transform: rotate(180deg);
transition: all .35s ease-in-out;
}
#drawer-left.closed .drawer-left-trigger > span{
transform: rotate(0);
}
#drawer-left.closed .drawer-left-trigger{
/*this will push the trigger on the right side*/
left: auto;
right: 25px;
}
.drawer-left-content{
/*this is the container for the header and content*/
position: absolute;
top: 0; bottom: 0; right: 0; left: 24px;/*the triggers width(+-1px from the border)*/
}
#drawer-left.closed .drawer-left-content{
/*this will push the content out*/
left: 100%;
right: -100%;
}
.drawer-left-trigger,
.drawer-left-content{
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
transition: all .35s ease-in-out;
}
JS
$(function () {
/*the left one*/
$('.drawer-left-trigger').click(function(){
$(this).parent().toggleClass('opened closed');
});
});
You could use FlexBox.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Browser Support
http://caniuse.com/#feat=flexbox
You can use translateY, and position relative.
.drawer-left-trigger > span{
transition: all .35s ease-in-out;
transform: rotate(180deg) translateY(-50%);
position: relative;
top: 50%;
}
If the .drawer-wrapper is the only element on the page, consider setting its height to 100% instead of 500px by adding
html,body,.drawer-wrapper {
height: 100%;
}
If you need to add some navigation bar on top, calculate drawer's height by calc(100% - 50px) where 50px is the height of navigation bar.
Working version
http://codepen.io/antraxis/pen/yyoNpg