I want to have a div, that when you hover it, text scroll if it's larger than the div.
But for now the text will always scroll event if it's shorter.
Here is my html code :
https://codesandbox.io/s/gracious-glade-7z31zc?file=/index.html
In this exemple, I would like the animation disabled on the second as it fits in the container.
Do you know a way to do it in CSS ? Or do I have to use JS ?
Thanks.
Dont know it is possible in CSS, but its quite simple is JS.
First of all i made another class for hovering effect:
.scrolled:hover {
animation: scroll-rtl 15s linear forwards;
}
Then quick js as commented.
document.querySelectorAll('.chip-value') // get all elements you want
.forEach( item => { // iterate over them and get every as "item"
if(item.offsetWidth > 400){ // check if it's widthter than parent
item.classList.add('scrolled') // if is, add him class to scroll
}
})
.chip-container {
margin-left: 3px;
margin-right: 3px;
margin-top: 3px;
margin-bottom: 3px;
max-width: 400px;
height: 32px;
font-size: 0.8125rem;
display: inline-flex;
align-items: center;
/* WebkitBoxAlign: center; */
border-radius: 16px;
white-space: nowrap;
/* // outline: 0, */
text-decoration: none;
/* // border: 0, */
vertical-align: middle;
/* // boxSizing: 'border-box', */
overflow: hidden;
background-color: gray;
color: white;
}
.chip-value {
display: inline-block;
position: relative;
text-overflow: clip;
margin-right: 5px;
margin-left: 5px;
}
.scrolled:hover {
animation: scroll-rtl 15s linear forwards;
}
#keyframes scroll-rtl {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet/css" href="index.css" />
<title>Static Template</title>
</head>
<body>
<div class="chip-container">
<div class="chip-value">
Very very very very very very very very very very very very very very
very very very very very very very very very long
</div>
</div>
<div class="chip-container">
<div class="chip-value">
Not long
</div>
</div>
</body>
</html>
You wouldn't be able to do this with CSS alone, but you could use JS to check the size of the content inside of the container to compare it to the width of the container. If content > container, then scroll; else do nothing. Here's what I might do in this situation:
document.addEventListener('DOMContentLoaded', function(){
var elements = document.getElementsByClassName('chip-container');
for(var element of elements){
var pw = element.querySelector('.chip-value').offsetWidth;
var cw = element.offsetWidth;
if(pw > cw){
element.classList.add('animate-me-baby');
}
}
});
.chip-container {
margin-left: 3px;
margin-right: 3px;
margin-top: 3px;
margin-bottom: 3px;
max-width: 400px;
height: 32px;
font-size: 0.8125rem;
display: inline-flex;
align-items: center;
/* WebkitBoxAlign: center; */
border-radius: 16px;
white-space: nowrap;
/* // outline: 0, */
text-decoration: none;
/* // border: 0, */
vertical-align: middle;
/* // boxSizing: 'border-box', */
overflow: hidden;
background-color: gray;
color: white;
}
.chip-value {
display: inline-block;
position: relative;
text-overflow: clip;
margin-right: 5px;
margin-left: 5px;
}
.animate-me-baby:hover .chip-value {
animation: scroll-rtl 15s linear forwards;
}
#keyframes scroll-rtl {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}
<div class="chip-container">
<div class="chip-value">
Very very very very very very very very very very very very very very
very very very very very very very very very long
</div>
</div>
<div class="chip-container">
<div class="chip-value">
Not long
</div>
</div>
Related
I am fairly new at making responsive css and I have not done much yet.
If you open the following code in fullscreen and change the height of the tab, the smaller the height, the more of a gap there is between my hero and about section.
I want the gap to remain the same size on all devices.
Hopefully you can help,
Thanks.
body {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#header {
border-radius: 15px;
margin-top: -0.8%;
background-image: url(./images/DJI_0410-Enhanced.jpg);
background-size: cover;
background-position: right;
width: 98.5%;
height: 94%;
}
#title {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-left: 8%;
}
h1 {
color: #f7f4f7;
margin-top: 10%;
font-size: 4.5vw;
font-weight: 700;
margin-bottom: 0;
}
#subTitle {
color: white;
}
h2 {
font-size: 3.6vw;
font-weight: 600;
margin-top: 10%;
}
button {
font-family: "Poppins", sans-serif;
font-weight: 600;
width: 7.5rem;
height: 3rem;
border-radius: 10px;
cursor: pointer;
}
.bookNow {
background-color: #f8f8f8;
color: #2B3758;
margin-right: 0.4rem;
transition: 200ms linear;
border: none;
}
.bookNow:hover {
background-color: #e6e3e6;
color: #2B3758;
}
.learnMore {
background-color: #2B3758;
color: #f7f4f7;
margin-left: 0.4rem;
transition: 200ms linear;
border: none;
}
.learnMore:hover {
background-color: #4e6090;
color: #f7f4f7;
}
#navBar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 2% 8% 0% 8%;
}
.logo {
width: 18%;
height: 18%;
}
li a {
text-decoration: none;
}
.page {
color: white;
}
.otherPages {
color: #585858;
transition: 200ms linear;
}
.otherPages:hover {
color: white;
}
.bookNow {
margin-right: 8%;
overflow: hidden;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
font-weight: 400;
}
.bookNowNav {
background-color: rgba(255, 255, 255, .3);
overflow: hidden;
border-radius: 15px;
border: 2.5px solid white;
padding: 0px;
transition: 200ms linear;
color: white;
margin-left: 25px;
}
.bookNowNav:hover {
background-color: rgba(230, 230, 230, 0.5);
}
#about {
position: absolute;
margin-top: 860px;
left: 50%;
transform: translateX(-50%);
width: 82.5%;
}
#aboutImage {
display: inline-block;
background-image: url(./images/DJI_0216.jpg);
background-size: cover;
background-position: center;
width: 47.8%;
height: 475px;
border-radius: 15px;
margin-right: 2%;
}
#aboutInfo {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 47.8%;
margin-left: 2%;
padding-top: 10px;
margin-top: -38px;
}
h2 {
position: justify;
margin-bottom: 30px;
}
.info {
color: rgb(140, 140, 140);
line-height: 30px;
text-align: justify;
height: 240px;
font-weight: 300;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Above Photography</title>
</head>
<body>
<div id="header" class="center">
<div id="navBar">
<img class="logo" src="./images/AbovePhotographyLogo.png" alt="Logo">
<nav>
<ul class=n av__links>
<li><a class="page" href="#">Home</a></li>
<li><a class="otherPages" href="#">Photography</a></li>
<li><a class="otherPages" href="#">Videography</a></li>
<li><a class="otherPages" href="#">Contact</a></li>
<button class = "bookNowNav">Book Now</button>
</ul>
</nav>
</div>
<div id="title">
<h1>Above <br>Photography</h1>
<h2 id="subTitle">Taking The<br>Perfect Picture</h2>
<button class="bookNow">Book Now</button>
<button class="learnMore">Learn More</button>
</div>
</div>
<div id="about">
<div id="aboutImage"></div>
<div id="aboutInfo">
<h2 class="">
About
</h2>
<p class="info">
My name is Max Herczeg and I'm a Grade 8 student from Toronto, Ontario. I have been flying drones for over 4 years and I've taken several photography courses as well. My passion for both of these interests has led me to create Above Photography. My age
allows me to provide clients with an affordable cost for a high-end final product. Above Photography has a creative and fun approach to each project. My company uses the high-end DJI Air 2S Drone. It shoots 5.4K video resolution and 20 mega pixel
pictures. This means that both photos and videos will look outstanding.
</p>
<button class="seeWork">Learn More</button>
</div>
</div>
Like mentioned by Ouroborus in the comments, there is no short answer here and there are several reasons:
You’re setting both the header (.center) and the #about divs to position: absolute.
Absolute positioning removes elements from the normal document flow and has several side effects.
Your header’s height is set to a percentage value & it has no relative positioned parent container with a set height.
So it gets its height from the <body>, which at the same time is your viewport’s height.
In other words, if your viewport changes height, so does your #header too.
You're setting a fixed margin-top: 860px to the #about section, but your #header dimensions are not fixed, like explained in point 2.
So putting it all together this means that whenever you make the viewport anything shorter than 860px, the margin on the about section remains at 860px BUT your header shrinks with the viewport. Thus why the shorter the height, the larger the gap in between. This is how It works.
Note: If you make your window taller, because the header is 94% height of the body, it will actually overlap the about section. *You can see this clearly by setting a background-color to the #header and making your window 1600px tall for example.
Also, when you do this, as is your #title will be centered vertically in the document... Potentially being out of place with your header's content and/or even overlapping with the about image (or any other content).
My suggestion is:
Move away from position absolute unless strictly necessary for complex inner layouts. You don't need the header container or the about to be absolute.
Before trying to do responsive layouts, make sure you understand how CSS box-model, display, and positionworks.. As well as flexbox and/or grid layouts (Even floats, if you want to learn like in the old days).
https://www.w3schools.com/css/ is a great place to start. Happy coding.
I have tried to add transitions to my input forms but it doesn't work. I've read a lot of stack overflow posts but they haven't worked for me. A person said that it's because input has display: none but even after changing it, it still didn't work. I tried to be more specific when using transition but that didn't work. So I'm not sure how to fix this issue. The transition applies to the button but not to the input forms.
https://codepen.io/i-am-programming/pen/gOmydqv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<nav>
Home
About
Store
Contact Us
</nav>
<div class="container">
<h1 class="login">Log In</h1>
<input type="text" placeholder="Username" class="username info" />
<input type="password" placeholder="Password" class="pass info" />
<input type="button" class="button" value="Submit" />
</div>
<script src="app.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
font-size: 25px;
font-family: "Montserrat", sans-serif;
}
body {
background: url("images/background.jpeg");
background-size: cover;
}
a {
text-decoration: none;
margin-right: 30px;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
padding: 8px;
transition: 0.3s ease;
}
nav {
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
a:hover {
color: black;
background-color: rgba(255, 255, 255, 0.7);
}
.container {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 450px;
background-color: rgba(0, 0, 0, 0.7);
align-items: center;
}
.login {
color: white;
margin-top: 50px;
font-size: 45px;
}
input {
outline: none;
padding: 5px;
transition: 0.3s;
}
input:hover {
width: 400px;
}
.username {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.pass {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
width: 150px;
margin-top: 250px;
}
Firstly your code in text and link are different. Secondly you can't use transition on display cause it's not animatable. You cna use opacity and visibility instead of display. If we come to our question..
You want to get bigger input place when user get hover it right? So in your example your input does not has any width and when you hover it you want to get a transition. For this you need to add a width value to your input so it will know where the change began and what you want at the end. Meanwhile the time you passed is your time attribute on your transition. So
input {
height: 30px;
width: 300px;
outline: none;
transition: 0.3s;
}
input:hover {
width: 400px;
}
It will know that when user hover on it, it will grow to 400px from 300px in 0.3s. That's it. Hope you get it.
I think you are missing transition property in the input, it will be like this:
input {
height: 30px;
width: 300px;
outline: none;
transition: all 0.5s ease;
}
input:hover {
width: 500px;
}
Read more of the CSS transition
It's because you didn't specify the width of your input
I want to make a rotating animation for the search icon, that when the input gets focused, then the icon rotates 90 degrees around the Y-axis, and then the text cursor appears, so it's like the search icon being transformed into the text cursor (try it with the code snippet below), but when I apply the transform property to the icon which is a png image, it gets pixelated and it doesn't look good, Is there a way to fix this problem?
Here's the difference:
.Navbar {
display: flex;
padding: 50px;
align-items: center;
justify-content: center;
}
.Navbar .SearchBox {
position: relative;
}
.Navbar .SearchBox input {
background-color: darkgray;
border-style: none;
color: transparent;
padding: 0px 16.5px 0px 10px;
font-family: 'vazir';
border-radius: 6px;
height: 35px;
outline: none;
width: 300px;
direction: rtl;
}
.Navbar .SearchBox img {
height: 17px;
position: absolute;
top: 9px;
right: 8px;
transform: rotateY(0deg);
transition: transform .3s ease-out;
}
.Navbar .SearchBox input:focus {
color: white;
transition: color 0s ease .3s;
}
.Navbar .SearchBox input:focus + img {
transform: rotateY(90deg);
transition: transform .3s ease-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header class="Navbar">
<div class="SearchBox">
<input type="text">
<img src="https://i.ibb.co/DRLFR0w/search.png" alt="search">
</div>
</header>
</body>
</html>
This happens because when you define a transformation on the element it will create a new stacking context which will make the element have its own path in the renderer. Chrome apparently applies a different antialiasing algorithm for such elements in their own stacking context.
To workaround that, you can simply omit that rule and let the transition start from initial:
body{ background: #333 }
img { height: 17px; }
.transform {
transition: transform .3s ease-out;
}
:hover>.transform {
transform: rotateY(90deg);
}
<span><img src="https://i.ibb.co/DRLFR0w/search.png" alt="search"></span>
<span>
<img class="transform" src="https://i.ibb.co/DRLFR0w/search.png" alt="search"></span>
I've been attempting to get multiple buttons to align vertically and horizontally next to each other in the center of the page. This is what I am aiming for: aligned buttons
However, I have only either gotten the images to center, but then they are not horizontally aligned. Or, I have gotten them to align horizontally, but they are not centered. Here is the code I am using on the buttons.
//used to remove the transition item so that the image changes. This is necessary to show image transition on load.
$(".hoverImage").removeClass("transitionHoverImage")
//sets welcome text opacity to 0 so it can be faded in
$('.welcomeText').css("opacity", 0);
//wait a second before attempting to fade text in. Second parameter of "fadeTo" sets opacity to 1 (100%)
$('.welcomeText').delay(1400).fadeTo(800, 1);
$('.portfolioBtn').css("opacity", 0);
$('.portfolioBtn').delay(1400).fadeTo(800, 1);
$('.resumeBtn').css("opacity", 0);
$('.resumeBtn').delay(1400).fadeTo(800, 1);
body {
font-family: Oswald, Baloo, Calibri, sans-serif;
background: black url(../images/background.jpg) no-repeat center;
height: 3600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.about {
display: block;
text-align: center;
background-color: #ffffff rgba(255, 255, 255, 0.5);
position: relative;
width: 904px;
padding: 33px 27px 34px;
z-index: 1;
}
.logo {
position: fixed;
left: .25em;
top: 3%;
height: 210px;
width: 150px;
z-index: 1;
}
/* you want to set up a transform, translate for this transform: translate (0, -100px); and */
.hoverImage {
position: relative;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.transitionHoverImage {
transform: translate(0px, 200px);
}
.door {
transition: transform 1.5s ease-out;
}
.welcomeText {
position: relative;
top: 120px;
z-index: 1;
font-size: 7em;
color: white;
text-align: center;
}
.centerBtns {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -700px;
text-align: center;
width: 15%;
margin: 0 auto;
font-size: 2em;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
padding: 1.5em 2.8em;
z-index: 2;
}
.resumeBtn {
}
.portfolioBtn {}
/* why is this so finnicky?!?!?!?!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!???????????
/* dropdown menu code starts here */
/*this is the code for the revealed box and the dropshadow of box */
.dropdown-content {
display: none;
position: fixed;
right: 2em;
top:3%;
background-color:#343434;
min-width: 1em;
border-radius: 1em;
box-shadow: .25em 0em .5em #343434;
padding: 0em;
z-index: 1;
}
/* this is the highlight color when you hover over an item */
.dropdown-content a:hover {
background-color: dimgray;
}
/*w3 said I needed this code, so I put it in */
.dropdown:hover .dropdown-content{
display:block;
}
/*revealed dropdown style */
.dropdown-content a {
color: lightgray;
border-radius: 6px;
border-style: solid;
border-color: #343434;
background-color: #343434;
font-weight: bold;
text-align: center;
padding: .5em;
text-decoration: none;
display: block;
}
/*menu button for dropdown*/
.menu-button {
position: fixed;
right: 2em;
top:3%;
font-weight: bold;
font-size: 1em;
color: lightgray;
padding: 1em;
background-color: #343434;
border-color: #343434;
border-style: solid;
border-width: 2px;
border-radius: 6px;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- favicon links-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>DenneyDesign</title>
<!-- CSS Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<ling href="css/animate.css" rel="stylesheet">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Baloo|Oswald" rel="stylesheet">
</head>
<body>
<!--Menu Bar-->
<div class="dropdown">
<button class="menu-button">MENU</button>
<div class="dropdown-content">
HOME
ABOUT
ARTWORK
RESUME
SOCIAL
</div>
</div>
<!--Logo-->
<div>
<img class ="logo" src="images/logo.png">
</div>
<!--Welcome Text-->
<div>
<header>
<h1 class='welcomeText'>WELCOME</h1>
</header>
<!--Hover Image-->
<img class="door hoverImage transitionHoverImage" src="images/door_slider.png">
</div>
<!--Buttons-->
<div>
<button class="centerBtns"><b>PORTFOLIO</b></button><button class="centerBtns resumeBtn"><b>RESUME</b></button>
</div>
<!--About-->
<div>
<header>
<h1><a name="about">ABOUT</a></h1>
</header>
</div>
</body>
<!--javascript-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>
Thanks for your help!
Flexbox does this easily. Use display: flex; justify-content: center; align-items: center; on the parent.
div {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
background: black;
}
<div>
<button>button</button>
<button>button</button>
</div>
Using flexbox is indeed the simplest solution, but just in case I re-arranged your CSS:
.centerBtns {
position: relative;
text-align: center;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
z-index: 2;
width: 40%;
font-size: 1.5em;
padding: 1.5em;
line-height: 3em;
}
<div>
<button class="centerBtns"><b>PORTFOLIO</button><button class="centerBtns resumeBtn">RESUME</b></button>
</div>
If you want both buttons to have the same width make sure the width % is large enough to contain the text. Or if not just remove the width property and tweak around with the last 3 properties to get the results you want.
There are some issues with the code you've provided, and I believe that may be making it difficult to isolate the problem.
A stripped down version of what you posted shows how this can be achieved with a combination of relative positioning and flexbox.
body {
height: 100vh;
background-size: auto auto;
background-color: red;
position: relative;
}
.nav {
border: solid 1px blue;
background: rgba(0,0,255,0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 750px;
display: flex;
align-items: center;
justify-content: center;
}
.nav__button {
font-size: 44px;
margin: 50px;
width: 250px;
padding: 30px 0;
}
<div class="nav">
<button class="nav__button">Portfolio</button>
<button class="nav__button">Resume</button>
</div>
Plunker mirror of the above here: http://plnkr.co/edit/LwJyRFFpSE9dj4KtCuw6
You can use FlexBox. If you have a few buttons, you can set the "justify-content" property as "center", and set a margin to each button. On the other hand, if you have many buttons, you can set the "justify-content" as "space-around", and remove the margin.
https://jsfiddle.net/pablodarde/nhxukt5c/
HTML
<div class='buttons'>
<button>
<b>PORTFOLIO</b>
</button>
<button>
<b>RESUME</b>
</button>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.buttons button {
display: inline-flex;
margin: 5px;
}
For some reason I can't get the Text to hide while it transitions off the screen.
Example, I have a rectangle hidden off screen, but even after the page should end (sides of the page) the rectangle is still visible which is very odd. I've solved this issue before but I forgot.
Code:
<!DOCTYPE html>
<html>
<header>
<title>RNS|Blog</title>
</header>
<head>
</head>
<body>
<style>
#tuti {
margin-left: 1000px;
margin-right: 0;
}
#tuti:hover {
width: 600px;
padding: 0px;
}
#tuti a {
float: left;
overflow: hidden;
padding-left: 45px;
white-space: nowrap;
font-size: 1.5em;
}
#tuti {
width: 30px;
height: 75px;
background-color: #655655;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
opacity: 0.5;
margin: 0;
padding: 0;
border: 0;
color: white;
font-weight: 300;
margin-top: 30px;
}
.right {
float: right;
}
}
</style>
<h1 class="right", id="tuti"><a>really nice server I blog</a></h1>
</body>
<footer>
</footer>
</html>
JSFiddle: https://jsfiddle.net/eobwtvxL/
The main reason is that the text within the a tag has width and the h1 tag should be set to overflow:hidden. Also, setting position:absolute on the h1 will take it out of document flow and allow you to place it anywhere without affecting adjacent elements. Here is the cleaned up CSS:
#tuti {
overflow:hidden;
position:absolute;
right:30px;
top:30px;
width: 30px;
height: 75px;
background-color: #655655;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
opacity: 0.5;
margin: 0;
padding: 0;
border: 0;
color: white;
font-weight: 300;
}
#tuti:hover {
width: 600px;
padding: 0px;
}
#tuti a {
position:absolute;
overflow: hidden;
padding-left: 45px;
white-space: nowrap;
font-size: 1.5em;
}
Cleaned up fiddle:
https://jsfiddle.net/eobwtvxL/1/
You also need to fix this:
<h1 class="right", id="tuti">
No comma:
<h1 class="right" id="tuti">
Make sure to assign overflow:hidden; to any element that contains the pullout bar. In your jsfiddle add this #tuti {overflow:hidden;} and you will see it will work.