I am trying to create a horizontal accordion in twitter bootstrap (2.3.2). I have found some css online that works very well and allows me to utilize the existing js. This all works great - except in safari (iOS and Windows). In safari the collapsed element still retains some width even though the width is correctly set to 0px.
I have created a fiddle:
http://jsfiddle.net/foetalstalk/3erSh/
The css I am using is:
.accordion-group, .accordion-heading, .accordion-body
{
display:inline-block;
}
.collapse
{
height:auto;
width:auto
}
.collapse.height
{
height:0;
-webkit-transition:height .35s ease;
-moz-transition:height .35s ease;
-o-transition:height .35s ease;
transition:height .35s ease;
}
.collapse.width
{
width:0;
-webkit-transition:width .35s ease;
-moz-transition:width .35s ease;
-o-transition:width .35s ease;
transition:width .35s ease;
}
.collapse.width.in
{
width:auto
}
.collapse.height.in
{
height:auto
}
I am developing on windows and can replicate the problem using the safari downloaded from here:
http://support.apple.com/kb/dl1531
The problem seems to be with the inline-block elements. Can this be fixed with a little sprinkle of css magic?
Try use max-width:0; and max-width:1000px;. It's work for me
.collapse.width
{
width:0px;
max-width:0;
-webkit-transition:width .35s ease;
-moz-transition:width .35s ease;
-o-transition:width .35s ease;
transition:width .35s ease;
}
.collapse.width.in
{
width:auto;
max-width:1000px;
}
DEMO
Thanks for the help Anon.
As it happens it was easier to create this from scratch as suggested by Anon.
http://jsfiddle.net/foetalstalk/N2GSV/23/
.accord-group, .accord-heading, .accord-body
{
display:inline-block;
}
.accord-body
{
vertical-align:top;
visibility:hidden;
/* non zero width - for safari */
margin-left:-1px;
width:1px;
-webkit-transition:all 0.35s ease;
-moz-transition:all 0.35s ease;
-o-transition:all 0.35s ease;
transition:all 0.35s ease;
overflow:hidden;
}
.accord-body.in
{
visibility:visible;
margin-left:0px;
width:100px;
}
See fiddle for html and js.
Related
CSS Transition is not working in chrome on image hover, please check the JSFiddle example
HTML
<div class="screenThum">
</div>
CSS
.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.screenThum .portfolio:hover{
opacity:0.9;
background-size:120%;
}
I have tried with previous SO answers but didn't worked with my code, not sure whats wrong?
thanks
If you are comfortable with it then you can use transform:scale
to get same effect. Edited: taking the reference of #Alexandre Beaudet
.screenThum{
overflow: hidden;
width: 350px;
height: 250px;
}
.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;}
.screenThum .portfolio:hover{
opacity:0.9;
-moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
<div class="screenThum"></div>
Try to set screenThump width & overflow: hidden. Then use the transform: scale(x) property. This way you will get the zoom effect and the image will not get out of the container width.
.screenThum {
overflow:hidden;
width: 350px;
}
.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.screenThum .portfolio:hover{
opacity:0.9;
transform: scale(3);
}
/* CSS used here will be applied after bootstrap.css */
body{
background-color:yellow;
}
img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
img:hover{
-webkit-filter:blur(5px);
}
<img src="http://i.stack.imgur.com/K0jNI.png">
When you hover over the image the borders of the image flash for a bit before settling.. Is there a way to fix that?
And how do i make a text show up on the middle of the image when i hover over it?
EDIT: This now looks great in Chrome
I don't think it's entirely possible to get a super clean transition when using webkit blur. I've had a lot of rendering issues and glitches when using it before. It's a resource hog too when used on a lot of elements. My advice to change your easing to linear and target only the blur. That should tighten it up a little bit.
img{
-webkit-transition: -webkit-filter 0.5s linear;
-moz-transition: -webkit-filter 0.5s linear;
-o-transition: -webkit-filter 0.5s linear;
-ms-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
As for the text fade in. You'll need to add in an element that is initially opacity:0; but then changed to opacity:1; when the parent block is hovered. Initial HTML changed to this:
<div class='block'>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<span>Hey there</span>
</div>
And the new CSS
/* CSS used here will be applied after bootstrap.css */
body {
background-color: yellow;
}
img {
-webkit-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
.block {
position: relative;
width: 400px;
}
.block img {
width: 100%;
}
.block span {
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s;
color: white;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: 0;
right: 0;
}
.block:hover > span {
opacity: 1;
}
img:hover {
-webkit-filter: blur(4px);
}
Example here
http://codepen.io/jcoulterdesign/pen/58d613e80e4a768cc9e54aa1e7aaa0af
I have 2 images that are changing when I hover on the first one.
On the second one, I have some text because I want a link there.
My problem is now that I want the hover image to remain when I hover over the link.
Here is my code:
#blur {
border: 1px solid #bebfc1;
position:relative;
height:450px;
width:300px;
margin:0 auto;
-webkit-transition: border 1s ease-in-out;
-moz-transition: border 1s ease-in-out;
-o-transition: border 1s ease-in-out;
transition: border 1s ease-in-out;
}
#blur img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#blur:hover {
z-index:2;
border: 1px solid #000000;
}
#blur img.top:hover {
opacity:0;
}
#blur .text {
position:absolute;
color:#bebfc1;
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
font-family:"Segoe UI Light";
font-size:13px;
}
#blur:hover .text {
opacity:1;
}
<div id="blur">
<img class="bottom" src="http://s28.postimg.org/do5izc4gd/image.png" />
<img class="top" src="http://s28.postimg.org/a5tj2y3kd/image.png" />
<p class="text" style="bottom:6px; left:180px;">link</p>
</div>
When I hover over the link I want the red image to remain the same.
How can this be done?
Thanks !!!
DEMO here http://jsfiddle.net/VYR9q/
Okay, I fixed it in the fiddle line you provided :)
Here you are what I fixed:
#blur:hover .top {
opacity:0;
}
Instead of:
#blur img.top:hover {
opacity:0;
}
Edit from: #biziclop:
You can make it:
#blur:hover img.top
I think you should simply move :hover from the img to the common parent #blur
#blur img.top:hover {
to
#blur:hover img.top {
Live example: http://jsfiddle.net/VYR9q/2/
Change your css to :
#blur:hover img.top {
//your css
}
The transition on my code isn't transitioning out. When I hover over it, it's fine but when I move my mouse away it just goes back to the original without transition.
Here's the code:
#nav a {
display:inline-block;
text-transform:lowercase;
width:35px;
padding:5px;
margin-left:3px;
font-size:9px;
letter-spacing:1px;
text-align:left;
border-bottom:1px solid {color:border};
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
#nav a:hover {
width:50px;
text-align:right;
border-bottom:1px solid {color:border};
}
According to Mozilla, the text-align property is not animatable. The only reason that this code is animating at all is because the width is being animated. You'll have to use another property that is animatable, such as margin, padding or left.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties?redirectlocale=en-US&redirectslug=CSS%2FCSS_animated_properties
I'm trying to change the attributes of one div from another div's hovering. Both of the div's has their own unique ID and I'm wondering if this is possible.
Here is the jsfiddle link:
http://jsfiddle.net/Ngx5D/
And here is the sample code:
body {
background-color:lightgrey;
}
#div_one, #div_two{
background-color:darkred;
display:block;
width:300px;
text-align:center;
padding:30px;
margin:10px;
color:white;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
#div_one:hover {
background-color:red;
}
Write like this:
#div_one:hover + #div_two{
background-color:red;
}
Check this http://jsfiddle.net/Ngx5D/1/