i'm developing a website, and i have a bug as seen in this fiddle.
My footer, on hover, should go up, and on "mouse-out" should go back to his place, but if i go out, and place the mouse where it went after going up, the footer automatically goes up without the smooth effect ...
I can't explain this in other easier way, so if someone understands and knows how to help, i really appreciate!
Here is the same code:
html, body{
height: 100%;
}
.x{
width:100%;
min-height: 100%;
background-color: #000;
color: #FFF;
}
.y{
background-color: #ABC;
width: 100%;
text-align: left;
position: fixed;
bottom:-50px;
height: 100px;
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-ms-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in;
}
.y:hover{
-webkit-transition: ease;
-moz-transition: ease;
-ms-transition: ease;
-o-transition: ease;
transition: ease;
-webkit-transform: translate(0px,-100px);
-moz-transform: translate(0px,-100px);
-ms-transform: translate(0px,-100px);
-o-transform: translate(0px,-100px);
transform: translate(0px,-100px);
}
<body>
<div class="x"> x
</div>
<div class="y"> y
</div>
</body>
You need to add a timing value for the transition on hover
transition: 0.5s ease;
See updated fiddle;
Related
So I've been wanting to do this scale transition on an icon on a blog. And the ease-in is working properly but not the ease-out... I read some stuff but none of them are about the scale transition so I've been having a hard time applying it to my case..
Hope you can help me thanks
Here's my code :
#avatar {
margin:auto;
margin-top:15px;
width:50px;
height:50px;
border-radius:60px;
border:0px solid {color:Main icon background};
z-index:10;
}
#avatar img {
width:100%;
height:100%;
border-radius:100%;
}
#avatar img:hover{
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-ms-transform: scale(1.5, 1.5); /* IE 9 */
-webkit-transform: scale(1.5, 1.5); /* Safari */
transform: scale(1.5, 1.5);
}
<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>
Updated the snippet to include
#avatar img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
To make the ease-out transition effective.
#avatar {
margin: auto;
margin-top: 15px;
width: 50px;
height: 50px;
border-radius: 60px;
border:0px solid {
color: Main icon background
}
;
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 100%;
}
#avatar img:hover {
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-ms-transform: scale(1.5, 1.5);
/* IE 9 */
-webkit-transform: scale(1.5, 1.5);
/* Safari */
transform: scale(1.5, 1.5);
}
#avatar img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>
/* 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
"Solution" Edit: I ended up just changing the layout a bit to get around this issue, as shown below. The original problematic behavior was present in other browsers as well, so I simply kept the button in place instead of sliding it to the left upon opening the search box.
--------- Original Question ---------
I wasn't sure how to word my title, but let me explain my issue. Using pure CSS and HTML, I'm making an expanding search box. The problem I have is when closing the search box, if you don't move your mouse, the button will still be shown as hovered, even though it has moved. Here is my problem:
What can I do to prevent this, if possible? It just messes with the look of the animation even if you move off of it when you click. The animation is smoother than shown. Using latest Chrome on W7.
CSS:
div#nav-search {
display: inline-block;
height: 34px;
float: right;
font-size: 0;
width: 60px;
position: absolute;
top: 43px;
right: 0;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
nav#header-nav.small div#nav-search {
top: 18px;
}
div#nav-search.open {
background-color: #FFBC43;
width: 95%;
}
div#nav-search-wrapper {
display: inline-block;
vertical-align: top;
height: 34px;
width: calc(100% - 60px);
margin: 0;
padding: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
button#nav-search-btn {
display: inline-block;
height: 34px;
width: 60px;
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
margin: 0;
padding: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
button#nav-search-btn span {
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
-o-transform: skew(45deg);
display: block;
width: 100%;
height: 100%;
background-image: url({{ 'search-gold.png' | asset_url }});
background-size: 24px;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
button#nav-search-btn:hover {
background-color: #FFBC43;
}
button#nav-search-btn:hover > span, div#nav-search.open > button#nav-search-btn span {
background-image: url({{ 'search-brown.png' | asset_url }});
}
HTML:
<div class="nav-right transition">
<span class="phone-number">{{ settings.company_phone }}</span>
<div id="nav-search">
<button id="nav-search-btn"><span></span></button>
<div id="nav-search-wrapper">Wrapper filler text</div>
</div>
</div>
I have this code it should scale a link when the mouse is over it
HTML
<a class='subj' href='#'>English 2</a> </br>
CSS
.subj{
text-decoration:none;
transition: 0.5s ease-in-out ;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
}
.subj:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
}
This code works fine on both chrome and mozilla when the tag is <p> but when it is <a> it's not working on mozilla but it does on chrome
Set the .subj display property to inline-block.
.subj {
text-decoration:none;
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
display: inline-block;
}
Dear Stackoverflow readers,
Using only CSS3, how do I show a div after a transition is completed.
This is the snippet of HTML I'm working with
<div class="biography">
<p>Title</p>
<p id="moreBio">This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>
This is the snippet of CSS3 I'm working with
.biography {
width: 100px;
height: 40px;
float: left;
margin: 5px;
background: #3399FF;
color: #ffffff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
position: relative;
right: 5%;
font-weight: bold;
font-size: 15px;
text-align: center;
padding: 10px;
border-radius: 5px;
opacity: 0.4;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.biography:hover {
width: 200px;
height: 600px;
margin: 10px 10px 0px -100px;
opacity: 1;
background: #7C7C7C;
}
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
}
#moreBio:hover {
opacity: 1;
}
I want #moreBio to show after the transition is completed, how would I go about doing that?
Thank you so much in advance.
Add a transition-delay to #moreBio equal to the transition time of .biography, and make the appearance trigger when .biography is hovered upon.
#moreBio {
opacity: 0;
transition: opacity 0.5s 0.5s ease;
-webkit-transition: opacity 0.5s 0.5s ease;
-o-transition: opacity 0.5s 0.5s ease;
-moz-transition: opacity 0.5s 0.5s ease;
}
.biography:hover #moreBio {
opacity: 1;
}
Instead of doing #moreBio:hover you could do .biography:hover #moreBio and then add a delay for the #moreBio transition like so
// ... other code just like it's
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.biography:hover #moreBio {
opacity: 1;
}
Here is the working sample.