I've just noticed that the hover easing on something is not working. It does the zoom effect, but it's instant instead of easing in and out. Is there a work around for IE on this?
CSS:
.nav-tile {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 130px;
width: 360px;
margin-bottom: 10px;
margin-left: 10px;
background-size: 130%;
overflow: hidden;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
float:left;
}
.nav-tile:hover {
transition: transform 3s linear;
background-size: 100%;
-moz-transition: all 3s;
-webkit-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
transition: all 3s;
}
If you want it to ease in and out, try this instead of using the "linear" property, set the ease to "ease-in-out".
Here is an example of all the easing effects possible in css3.
http://css3.bradshawenterprises.com/transitions/
.nav-tile:hover {
transition: transform 3s ease-in-out;
}
Related
I have a nav overlay I'm trying to slide in from the top of the screen using CSS, I can't figure out the Z index
Here is my attempt so far;
#nav-wrapper {
position: fixed;
z-index: 2;
right: 0;
width: 250px;
height: 100%;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
transform: translateZ(250px);
background: #191919;
border-left: 1px solid fade-out( #ffffff, 0.9);
}
Any help is much appreciated
/* 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've been working on my special hover effect for my button, but the problem is, it's not working on Firefox, but it works on chrome smoothly.
#hotsheet_wrapper .hs_sellers{
background:url('images/hs_sl_bg.png') center top no-repeat;
}
#hotsheet_wrapper .hs_buyers{
background:url('images/hs_sl_bg.png') center top no-repeat;
}
#hotsheet_wrapper .hs_senior{
background:url('images/hs_sl_bg.png') center top no-repeat;
}
#hotsheet_wrapper .hs_divorce{
background:url('images/hs_dl_bg.png') center top no-repeat;
}
#hotsheet_wrapper .hs_construction{
background:url('images/hs_dl_bg.png') center top no-repeat;
}
#hotsheet_wrapper .hs_sellers:hover{
background:url('images/hs_sellers.png') center top no-repeat;
transition: 1s all ease;
-moz-transition: 1s all ease;
-webkit-transition: 1s all ease;
-o-transition: 1s all ease;
-ms-transition: 1s all ease;
}
#hotsheet_wrapper .hs_buyers:hover{
background:url('images/hs_buyers.png') center top no-repeat;
transition: 1s all ease;
-moz-transition: 1s all ease;
-webkit-transition: 1s all ease;
-o-transition: 1s all ease;
-ms-transition: 1s all ease;
}
#hotsheet_wrapper .hs_senior:hover{
background:url('images/hs_senior.png') center top no-repeat;
transition: 1s all ease;
-moz-transition: 1s all ease;
-webkit-transition: 1s all ease;
-o-transition: 1s all ease;
-ms-transition: 1s all ease;
}
#hotsheet_wrapper .hs_divorce:hover{
background:url('images/hs_divorce.png') center top no-repeat;
transition: 1s all ease;
-moz-transition: 1s all ease;
-webkit-transition: 1s all ease;
-o-transition: 1s all ease;
-ms-transition: 1s all ease;
}
#hotsheet_wrapper .hs_construction:hover{
background:url('images/hs_construction.png') center top no-repeat;
transition: 1s all ease;
-moz-transition: 1s all ease;
-webkit-transition: 1s all ease;
-o-transition: 1s all ease;
-ms-transition: 1s all ease;
}
Looks like it's a bug - https://bugzilla.mozilla.org/show_bug.cgi?id=546052
However, you can use CSS opacity or JS/jQuery to get similar effects. Check out the following pure CSS solution.
.element {
position: relative;
width: 200px;
height: 300px;
}
.element:before,
.element:after {
background-repeat: no-repeat;
content:"";
position: absolute;
display: block;
width: 100%;
height: 100%;
opacity: 1;
}
.element:before {
background-image: url(https://picsum.photos/200/300?image=0);
transition: opacity 1s;
z-index: 1;
}
.element:after {
background-image: url(https://picsum.photos/200/300?image=1);
}
.element:hover:before {
opacity: 0;
}
<div class="element"></div>
"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>
in my present code, button initially is visible and with the transition, it becomes hidden behind the box. What i want is "my button initially should be hidden and should appear with the transition". Thanks in advance..
P.S. No jQuery
<!DOCTYPE HTML>
<body>
<div id="anim">
</div>
<input type="button" value="this should be behind" id="btn" />
</body>
</html>
<style>
#anim{
z-index: 1;
position: absolute;
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#anim:hover{
height:400px
}
#btn{
z-index: -1;
position:fixed;
margin-top: 300px;
}
</style>
You can set the opacity of the button on hover without changing the structure of your document using the adjacent sibling selector.
Here's how:
#anim:hover + #btn
{
opacity: 1;
}
Edit: You can also delay this using transition-delay on the button:
#btn
{
opacity: 0;
transition-delay: 700ms;
z-index: 2;
position:fixed;
margin-top: 300px;
}
Below is the complete CSS, as some changes were also made to initially hide the button, and to properly set the z-index property.
JSFiddle here.
#anim{
z-index: 1;
position: absolute;
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#anim:hover{
height:400px
}
#anim:hover + #btn{
opacity: 1;
}
#btn{
opacity: 0;
transition-delay: 700ms;
z-index: 2;
position:fixed;
margin-top: 300px;
}
I think this is what you want:
#anim{
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-ms-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
}
#anim:hover{
width: 600px;
}
#btn{
margin-left: 100px;
margin-top: 100px;
opacity:0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-ms-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
#anim:hover #btn{
opacity:1;
}
and add your button inside #anim div, just like this:
<div id="anim">
<input type="button" value="this should be behind" id="btn" />
</div>
and all this without javascript, only css.
JSBIN