Problem
I am trying to animate a div to 100% of it's child's width. I'm animating the max width on hover, but it is pushing the div to it's right away very abruptly instead of animating it smoothly to the right. Can anybody see why it isn't animating correctly? I would prefer not to use javascript if possible.
My Attempt
I have copied the fiddle below:
http://jsfiddle.net/tVHYg/1662/
into the following source
.contents {
white-space:nowrap;
display:inline-block;
}
.inner {
background:#c3c;
width: 100%;
max-width:50px;
overflow:hidden;
transition: all .3s ease-in-out;
padding: 5px 0 5px 0;
}
.contents:hover .inner {
max-width:100%;
}
<div class="contents">
<div class="inner">A bit of text never hurt anyone</div>
</div>
<div class="contents">
<div class="inner">A bit of text never hurt anyone</div>
</div>
The percent is the issue in regards to your code and probably because you have width: 100%; while at the same time you have max-width: 50px; for the inner class .
Using pixels fixes that. any pixels over the size of the boxes will simply animate it faster e.g max-width: 1000px; will just speed up the animation without enlarging the box boundaries
.contents {
white-space:nowrap;
display:inline-block;
}
.inner {
background:#c3c;
width: 100%;
max-width:50px;
overflow:hidden;
transition: all .5s ease-in-out;
padding: 5px 0 5px 0;
}
.contents:hover .inner {
max-width:1250px;
}
<div class="contents">
<div class="inner">A bit of text never hurt anyone</div>
</div>
<div class="contents">
<div class="inner">A bit of text never hurt anyone</div>
</div>
You can do this with display: inline-flex
.container {
display: inline-flex;
}
.contents {
display: inline-flex;
transition: all .3s ease-in;
overflow: hidden;
width: 50px;
margin: 2px;
}
.inner {
background:#c3c;
white-space:nowrap;
padding: 10px 0;
}
.contents:hover {
transition-delay: 0.2s;
width: 100%;
}
<div class="container">
<div class="contents">
<div class="inner">A bit of text never hurt anyone</div>
</div>
<div class="contents">
<div class="inner">A bit of text never hurt anyone</div>
</div>
</div>
Related
How do I make it so that when you hover, the original div goes away completely, not just the visibility and it has a transition in doing so and the new div doesn't show up until the transition is done? Using javascript is fine.
I know that using display doesn't allow for a transition, but it's the only thing I could think of and gives a good idea of what I'm trying to accomplish.
Here is the HTML:
<div class="square">
<div class="title">Title</div>
<div class="content">Content</div>
</div>
And this is the CSS:
.square{
width: 200px;
height: 200px;
background-color: lightblue;
}
.content{
display: none;
}
.square:hover .content{
display: block;
}
.square:hover .title{
display: none;
transition-duration: 800ms;
}
You can use the opacity to hide the title but it would still be there. Add click-event: none to it so that it would be invisible as well as non-clickable.
Or you can use the transform: translate() to make the title move away with the transition. Add these lines (commented) to your code:
.square{
width: 200px;
height: 200px;
background-color: lightblue;
position: relative;
}
.content{
display: none;
/*starts here*/
position: absolute; /* If you want to position the content exactly under the title*/
top: 0;
left: 0;
width: 100%;
height: 100%;
/*ends here*/
}
.square:hover .content{
transform: translateX(0); /*Add here*/
display: block;
}
.square:hover .title{
transform: translateX(-100%); /*Add here*/
transition-duration: 800ms;
}
<div class="square">
<div class="title">Title</div>
<div class="content">Content</div>
</div>
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 tried this from this question: Text over image using CSS transitions.
It's working fine in both IE11 and Firefox Quantum and in both sites the animation/transition works perfectly but when I try to visualize it in Chrome the text that should appear beneath the image and eventually hover it goes to the bottom of the page. The console also shows me zero errors.
My question resumes in if it is a CSS absolute attribute problem or something else.
Here's my code:
.size {
height: 150px;
width: 200px;
border: solid 1px orange;
overflow: hidden;
position: relative
}
.pic:hover > .text {
height: 190px;
}
.text {
position: absolute;
width: 200px;
height: 50px;
bottom: -40px;
right: 0;
left: 0px;
transition: height 0.7s ease-out;
background-color: #fed136;
overflow: hidden;
border: solid 1px #fed136;
padding: 10px;
}
.text > h4 {
text-align: center;
}
.block {
margin: 10px 10px 50px 10px;
float: left;
}
<div class="row">
<div class="block">
<div class="pic animated zoomIn">
<img src="someimage.jpg" class="size" />
<div class="text">
<h4>Some Title</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>
I'm using Bootstrap 3.3.5 and jQuery 2.1.4
I'm assuming that what you want is for the rollover text to be inside the image.
In this case I don't even know how it's working on IE11 or Firefox in your computer because here it fails on all browsers I have.
Your problem is basically that you are applying the CSS in the wrong element. Change .size to .pic in your CSS and it will get what you want.
Without position: relative inside .pic your position: absolute in .text is relative to the page itself (or the html element) and not the .pic element.
You also need overflow: hidden to hide any elements that go beyond the borders of the .pic element, thus hiding .text.
Added position relative & overflow as hidden to container div 'pic' and made height of div 'text' to zero. Its working fine in Chrome without any error and in IE too.
.size {
height: 150px;
width: 200px;
border: solid 1px orange;
overflow: hidden;
position:relative
}
.pic {
position:relative;
overflow:hidden;
}
.pic:hover > .text {
height: 190px;
}
.text {
position: absolute;
width: 200px;
height:0;
bottom: -40px;
right: 0;
left:0px;
transition: height 0.7s ease-out;
background-color: #fed136;
overflow: hidden;
border: solid 1px #fed136;
padding: 10px;
}
.text > h4 {
text-align:center;
}
.block {
margin:10px 10px 50px 10px;
float:left;
}
<div class="row">
<div class="block">
<div class="pic animated zoomIn">
<img src="someimage.jpg" class="size" />
<div class="text">
<h4>Some Title</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>
You can add properties for diferent browsers. First clear your cash and see if the problem is realy only i Chrome. Then you can create something like that :
#media screen and (-webkit-min-device-pixel-ratio:0) {
.container {-chrome-:only(;
property:value;
);}
The following implementation i came up with for a sidemenu works fine
https://jsbin.com/getotijela/edit?html,css,output
HTML:
<link rel="stylesheet" type="text/css" href="main.css">
<div class="container">
<div class="menu">
a
</div>
<div class="content">
<span id="clickable">
basdasdasdasdas
</span>
</div>
<div>
<script>
document.getElementById("clickable").addEventListener('click',function(){
var el = document.getElementsByClassName("menu")[0]
el.className = "menuClosed"
})
</script>
CSS:
.test{
background-color:red;
}
.container{
display:flex;
flex-direction: row;
position:relative;
height:100%;
}
.menu{
width:200px;
/* left:20px; */
background-color:red;
}
.menuClosed{
width:0px;
background-color:red;
transition: 0.3s all;
}
.content{
background-color:yellow;
flex:1;
}
but what it does is collapse the sidemenu to a width of 0 ( as i've instructed it to). What i was aiming for was: having the sidemenu move to the left as many units as it's width, something that in the past i would achieve by modifying the leftcss property.
In other words, i dont want the menu to collapse to a width of 0, just have it move out of sight
How could i achieve something similar to that in flexbox if at all?
#PossessWithin Why would you use a translateX for that ?
You should use the flexbox-shrink and flexbox-basis property's they are made especially for these cases.
I made a fiddle check it out here JSFiddle
<aside class="sidebar is-visible">
<p class="sidebar-content">
Put all your content inside of here since this keeps the width of your sidebar <br>(so a div with the width you want the sidebar to be).
</p>
</aside>
<main class="content">
<button class="toggle-sidebar">Toggle sidebar</button>
<p>
scale this content
</p>
</main>
CSS
*{
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: flex-end;
}
.content {
display: flex;
min-height: 0;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
}
.sidebar {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
height: 100%;
}
.sidebar.is-visible ~ .content {
flex-basis: 0;
}
/* Animation */
.content {
transition: flex-basis .1s cubic-bezier(.465, .183, .153, .946);
will-change: flex-basis;
}
.sidebar.is-visible ~ .content {
transition: flex-basis .3s cubic-bezier(.465, .183, .153, .946);
}
.sidebar-content {
display: block;
width: 300px;
background-color: #eee;
height: 100%;
margin: 0;
padding: 20px;
border-right: 1px solid #ccc;
}
.content {
padding: 20px;
}
Please vote this up since it's the way it's supposed to be done.
Please try this:
HTML:
<link rel="stylesheet" type="text/css" href="main.css">
<div class="container">
<div class="menu">
a
</div>
<div class="content">
<span id="clickable">
basdasdasdasdas
</span>
</div>
<div>
CSS
.test{
background-color:red;
}
.container{
display:flex;
flex-direction: row;
position:relative;
height:100%;
}
.menu{
width:200px;
transition: 0.3s all ease-in-out;
background-color:red;
}
.menuClosed{
background-color:red;
transition: 0.3s all ease-in-out;
transform: translateX(-200px);
margin-right: -200px;
}
.content{
background-color:yellow;
flex:1;
}
I have changed the "menuClosed" class by moving it to the left with a transform: translateX(-200px). To make the screen move back to the right, I have added a negative margin right of the same size.
This may not be the best practice - I'm open minded to hear other solutions!
Also, as a plus, I have changed your Javascript code to toggle the class, making it work to open and close on click, instead of opening only.
You can see the new code here, on Codepen. I hope it helps you!
Would I like to know how I can put in a div 100% height?
I have a div with an image and a div with content.
The image has a width 100%, and the same content but does not fill the entire image div.
I copied the code if you can help.
Thank you,
#carta div{
position: relative;
display: table;
}
#carta div .overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
position: absolute;
top:0;
text-align: center;
color:white;
cursor: pointer;
opacity: 0;
-webkit-transition:all .4s ease-out;
transition:all .4s ease-out;
}
#carta .overlay:hover{
opacity: 1;
width: 100%;
height: 100%;
}
#carta .col-1-4{
padding: 0;
margin:0;
}
#carta div img{
width: 100%;
display: table;
}
#carta .overlay p{
font-style: oblique;
font-size: 20px;
padding-top: 50px;
text-align: center;
border-top: 1px solid white;
-webkit-transition:all .4s ease-out;
transition:all .4s ease-out;
}
#carta .overlay h5{
font-size: 30px;
margin: 50px;
}
<div class="clearFix">
<div class="col-1-4">
<img src="img/carta/atun.jpg" alt="atún revuelto"/>
<div class="overlay">
<h5>Atun revuelto</h5>
<p>15€</p>
</div>
</div>
<div class="col-1-4">
<img src="img/carta/especialidaditaliana.jpg" alt="especialidad italiana"/>
<div class="overlay">
<h5>Especialidad Italiana</h5>
<p>15€</p>
</div>
</div>
</div>
Thank you very much for your responses.
I have solved by adding "display: table-cell" in the css class ".overlay"
Thus occupies the div, which occupies the image.
Many thanks
Use background in css,something like this: background: url(img/carta/especialidaditaliana.jpg);
You also can use div to set background
Like this: <div class="img">content</div> but you also need css background.
Something like this?It should work in .html document...
<style>
.img {
position: relative;
width: 200px;
height: 100%;
background: url(http://goo.gl/ytbJn8);
color: white;
}
</style>
<div class="img">This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.</div>
<div class="box"></div>