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>
Related
I am working on a menu that pops up at the right side of the screen.
https://jsfiddle.net/grhajrbp/
Html:
<div id="east-exit">
<div id="mail-option">
<a ng-click="controller.openEmails()"><i class="communicate-icon mail fa fa-envelope"></i></a>
<a><i class="new-mail fa fa-plus-circle"></i></a>
</div>
<a><i class="communicate-icon fa fa-comments"></i></a>
<i class="east-exit-icon fa fa-arrow-right"></i>
<a><i class="communicate-icon fa fa-phone"></i></a>
<a><i class="communicate-icon fa fa-camera"></i></a>
</div>
CSS:
html {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
#east-exit {
display: flex;
opacity: 1;
z-index: -1;
align-items: stretch;
justify-content: space-around;
flex-direction: column;
position: absolute;
right: 0;
height: 100%;
width: 85px;
font-size: 55px;
}
#east-exit:hover .east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
opacity: 0;
}
#east-exit:hover .communicate-icon {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
#east-exit:hover,
#mail-option:hover,
.mail:hover .new-mail {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
.east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
font-size: 45px;
opacity: 0.1;
}
.communicate-icon {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.new-mail {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.communicate-icon:hover,
.communicate-icon:focus,
.communicate-icon:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
color: grey;
cursor: pointer;
}
The menu shows four buttons. If I were to hover over the mail button, a small plus button should present itself next to the mail button. I'm currently only trying to get the plus button to show on hover (it is not at the right place yet. I can't get the plus button to show on hover of the mail button. Does anyone know how to do this?
Moreover, I also tried to get the button at the right place with flexbox. (The images below show where it is supposed to go). I couldn't get this to work either. Does anyone have any suggestions I could try? First image:
Second image:
Third image:
You can use the following css rule
.communicate-icon.fa.fa-envelope:hover {
background: url(<image name>);
background-repeat: no-repeat;
background-position: -40px 0; // Change as needed
}
You will also need to make your div wider or the background image will not be displayed.
I am trying to allow a object to move down if either the bar or sidebar are hovered. I am trying the following code:
#sidebarcategoryshow:hover#sidebar:hover #sidebarcategoryshow{
margin-top: 200px;
z-index: 5;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
And basically I want #sidebarcategoryshow to move down if either one is hovered. Yet this does not seem to work, any idea? :( Currently it just is not working like it should.
You would need to use two separate selectors:
#sidebarcategoryshow:hover #sidebarcategoryshow,
#sidebar:hover #sidebarcategoryshow {
margin-top: 200px;
z-index: 5;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
If you are using LESS, you could use the following:
#sidebarcategoryshow, #sidebar {
&:hover #sidebarcategoryshow {
/* ... */
}
}
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;
}
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.
How would I make it so that if you hover over an image, the entire image changes to the color black (the image link must be in the HTML tag as the sizes and images are different)?
Here's what I have:
HTML:
<img src="http://www.floral-directory.com/flower.gif" class="image" />
CSS:
.image {
width: 250px;
}
.image:hover {
background: #000000;
}
The easiest way to do this is to wrap the img element in another, for example a span:
<span class="imgWrap">
<img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>
And couple that to the CSS:
.imgWrap {
display: inline-block;
border: 1px solid #000;
}
.imgWrap:hover {
background-color: #000;
}
img:hover,
.imgWrap:hover img {
visibility: hidden;
}
JS Fiddle demo.
And, if you'd like to make it a little prettier, using transitions to fade in/out:
.imgWrap {
display: inline-block;
border: 1px solid #000;
background-color: #fff;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap:hover {
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
img:hover,
.imgWrap:hover img {
opacity: 0;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
The HTML
<div class="change_bg">
<img src="http://eofdreams.com/data_images/dreams/image/image-07.jpg" >
</div>
The CSS
.change_bg img{
max-width : 300px;
}
.change_bg{
width : 300px;
height : 300px;
float:left;
}
.change_bg img:hover{
visibility : hidden;
}
.change_bg:hover {
background : #bc7d89;
}
Live Example # http://cdpn.io/Bmthc