I would like my element (which i have named as a class benefits-button) to slide in from the left upon hover. I have created the following two sets of css rules but I am having no luck:
.benefit-buttons {
transition-property: color, left;
transition-duration: 200ms;
transition-delay: .1s;
transition-timing-function: ease-in-out;
}
.benefit-buttons:hover {
opacity: 1;
color: #FF0000;
left: 50%;
}
.benefit-buttons {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
width:100px;
height:100px;
background:red;
}
.benefit-buttons:hover {
opacity: 1;
color: #FF0000;
transform:translate(50%);
}
<div class="benefit-buttons"></div>
An element cannot have a left property unless it's absolutely-positioned (read more). Try a left margin as an alternative:
.benefit-buttons {
width: 25%;
transition-property: all;
transition-duration: 200ms;
transition-delay: .1s;
transition-timing-function: ease-in-out;
}
.benefit-buttons:hover {
opacity: 1;
color: #FF0000;
margin-left: 10%;
}
Demo
Related
I'm trying to create a sort of "shooting star" animation on a button underline on hover. I've successfully achieved what I want and it's firing correctly on the first hover, but if you hover over it again the transition is glitchy and doesn't work as intended. The more you hover over it the less the width changes to the point where it no longer works.
I wondered if someone might be able to explain why this is happening?
Here is a JSFiddle
.btn {
position: relative;
font-size: 40px;
}
.btn::before {
content: '';
height: 1px;
width: 100%;
background-color: red;
position: absolute;
bottom: -1px;
right: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.btn::after {
content: '';
height: 1px;
width: 0;
background-color: blue;
position: absolute;
bottom: -1px;
left: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.btn:hover::before {
width: 0;
}
.btn:hover::after {
width: 100%;
}
<a class="btn">Button</a>
With the help of #somethinghere, I was able to resolve this myself. For anyone who might need this in the future, the reverse animation was too slow so was incomplete before hovering over the element again. Adding a transition of 0 for the reverse animation solved the problem.
jsFiddle
.btn {
position: relative;
font-size: 40px;
}
.btn::before {
content: '';
height: 1px;
width: 100%;
background-color: red;
position: absolute;
bottom: -1px;
right: 0;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.btn::after {
content: '';
height: 1px;
width: 0;
background-color: red;
position: absolute;
bottom: -1px;
left: 0;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s linear;
}
.btn:hover::before {
width: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s linear;
}
.btn:hover::after {
width: 100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s linear;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<a class="btn">Button</a>
/* 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 am trying to create an effect when I hover over an image, the image goes dark (so the opacity goes down) and text appears. The effects is basically this towards the bottom: http://www.ohmy.io/ . I can do one of the effects on their own, but doing both together they are almost fighting each other and goes dark for half a second then back light.
.vividworknav {
width: 33.333%;
height: auto;
float: left;
padding: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.vividworknav:hover .work-text-content {
visibility: visible;
opacity: 1.0;
}
.vividworknav:hover {
opacity: 0.3;
}
.work-text-content {
width: 33.333%;
height: auto;
visibility: hidden;
z-index: 100;
position: absolute;
color: white;
left: 0%;
top: 25%;
font-size: 24px;
text-align: center;
-webkit-transition: visibility opacity 2.0Ms;
}
<div class="vividworknav">
<img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
<div class="work-text-content">
<p>VIVID VAPOURS</p>
</div>
</div>
I added a black background to the parent element vividworknav, then I just set the opacity of the image and text on hover and then it seems to work fine.
.vividworknav {
width: 33.333%;
height: auto;
float: left;
padding: 0;
position: relative;
background-color: black;
}
.vividworknav:hover img {
opacity: 0.3;
}
.vividworknav:hover .work-text-content {
opacity: 1;
}
.vividworknav img {
padding: 0;
width: 100%;
display: block;
opacity: 1;
}
.vividworknav img,
.work-text-content {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.work-text-content {
position: absolute;
color: white;
left: 0;
top: 25%;
right: 0;
bottom: 0;
font-size: 24px;
text-align: center;
opacity: 0;
}
<div class="vividworknav">
<img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
<div class="work-text-content">
<p>VIVID VAPOURS</p>
</div>
</div>
.vividworknav{
width:33.333%;
height:200px;
float:left;
padding:0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
background-image: url("http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg");
}
.vividworknav:hover .work-text-content{
opacity: 1.0;
}
.work-text-content{
background-color: rgba(0,0,0,0.8);
width:33.333%;
height:100%;
opacity: 0;
z-index:100;
position:absolute;
color:white;
left:0%;
font-size:24px;
text-align:center;
-webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* 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.
would you see guys. my each image bottom have one caption bar with title. but that not same height for all box. all i want it will same height in all box and if you rollover then you will see that box slideup that's fine. also it will resposive. i am still trying but can not figureout it. would you guess see where i mistake. i just want to make that perfect. even if you any other css or js like that with responsive support then post here please.
thanks
http://jsfiddle.net/BAVXH/
bellow is css for caption
.box {
float: left;
border: 1px solid #FFF;
margin: 2px;
position: relative;
overflow: hidden;
background-color: #F00;
}
.box img {
position:relative;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
text-align: left;
padding: 2%;
top: 92%;
height:96%;
}
.box:hover .caption {
-moz-transform: translateY(-89%);
-o-transform: translateY(-89%);
-webkit-transform: translateY(-89%);
opacity: 1;
transform: translateY(-89%);
}
You could use something like this with jQuery and calculate the top for each caption.
for(i=0;i<8;i++){
var h = $('.col-'+i).height();
$('.col-'+i).find(".caption").css("top",h-25 + "px");
}
Hope this gives you an idea.
put height in px not in % like
.box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
text-align: left;
padding: 2%;
top: 92%;
height:100px;
}