CSS scale transition ease-out not working - html

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>

Related

Background image hover transition not working in chrome

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);
}

display div on hover with animation

I have right side fix position div. I want to display it on hover with animation.
What I want to do that if user hover on the whole div the both span should come out with slide animation. BUT right now the scroll is coming and only one span the text(need help) coming out not ? mark coming out.
.need-help-qu{
background-color:#042E49;
color:#ffffff;
padding:0px 10px;
right:0;
top:40%;
font-weight: bold;
font-size: 20px;
position:absolute;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help{
background-color:#06507D;
color:#ffffff;
right:-150px;
top:40%;
position:absolute;
padding:5px 10px;
display: inline-block;
overflow: hidden;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help-full:hover .need-help {
right:0;
}
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
Check this out.
You were trying to move individual divs so it was proving tricky, just bunch the whole content of .need-help-full div together and move it as a whole.
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
<style>
.need-help-qu{
background-color:#042E49; color:#ffffff; padding:3px 10px 2px;
font-weight: bold;font-size: 20px;float:left;
}
.need-help{
float:left; background-color:#06507D; color:#ffffff;
padding:5px 10px;overflow: hidden;
}
.need-help-full{
right:-123px; position:fixed; transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;-moz-transition: all .8s ease;
-ms-transition: all .8s ease;-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help-full:hover{right:0;}
</style>
Also I see that you are trying to accomplish this slide in box so mostly it is done using position:fixed; and not using absolute. Since it is generally "fixed" to the page and not to some container element.
You can do following way. Make parent component overflow:hidden. and move need-help-full left/right on hover and give absolute position to need-help-full div.
.need-help-qu {
background-color: #042e49;
color: #ffffff;
display: inline-block;
font-size: 20px;
font-weight: bold;
padding: 3px 10px;
vertical-align: top;
}
.need-help {
background-color: #06507d;
color: #ffffff;
display: inline-block;
overflow: hidden;
padding: 5px 10px;
right: -150px;
}
.need-help-full {
height: 50px;
overflow: hidden;
padding: 5px 10px;
position: absolute;
right: -135px;
top: 40%;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help-full:hover {
right:0;
}
body {
overflow: hidden;
}
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
Hope it helps.
$(".need-help-qu").hover(function(){
$(".need-help-qu").animate({right: '12px'});
});
body{
overflow-x:hidden;
}
.need-help-qu{
background-color:#042E49;
color:#ffffff;
padding:0px 10px;
right:0;
top:40%;
font-weight: bold;
font-size: 20px;
position:absolute;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help{
background-color:#06507D;
color:#ffffff;
right:-150px;
top:40%;
position:absolute;
padding:5px 10px;
display: inline-block;
overflow: hidden;
transition: all 0.4s ease-in-out;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.need-help-full:hover .need-help {
right:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>

Image flickering in Internet Explorer with transition and scale

For displaying the team members of a platform. I want to show and hide the social media icons when you hover over the image of the team member. I'm using the CSS properties transition and scale to accomplish this.
Here you can see my code: https://jsfiddle.net/johna/L9hbtqce .
(I also use Bootstrap as CSS Framework and Font Awesome for the icons.)
HTML
<div class="team-member text-center">
<div class="picture">
<img src="http://s22.postimg.org/hxl9mdjqp/member.png" class="img-responsive" alt="Ward"/>
<div class="mask">
<div class="team-member-icons">
<a target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
<a target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</div>
</div>
</div>
CSS
.team-member .picture {
background-color: #f2f2f2;
border: 7px solid #dedede;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 225px;
height: 225px;
margin: 0 auto;
border-radius: 50%;
}
.team-member .picture:hover img {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
.team-member .picture:hover .mask {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 1;
}
.team-member .picture:hover .mask .team-member-icons {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.team-member .picture img {
margin: 0 auto;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.team-member .picture .mask {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
border-radius: 50%;
width: 100%;
height: 100%;
}
.team-member .picture .mask .team-member-icons {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
display: table;
margin: 90px auto;
}
.team-member .picture .mask .team-member-icons a {
background-color: #a5a5a5;
border-radius: 50%;
display: block;
float: left;
height: 34px;
line-height: 32px;
margin: 0 5px;
width: 34px;
}
.team-member .picture .mask .team-member-icons a i {
color: #fff;
}
Everything works fine on Chrome or Firefox but on Internet Explorer (IE11) the image flickers when you "unhover" the circle with the social media icons.
Fixed my problem on Internet Explorer: https://jsfiddle.net/L9hbtqce/15/. I added an opacity of 1 to the image and an opacity of 0 when you hover over the image.
.team-member .picture {
background-color: #f2f2f2;
border: 7px solid #dedede;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 225px;
height: 225px;
margin: 0 auto;
border-radius: 50%;
}
.team-member .picture:hover img {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.team-member .picture:hover .mask {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 1;
}
.team-member .picture:hover .mask .team-member-icons {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.team-member .picture img {
margin: 0 auto;
width: 100%;
height: 100%;
-ms-transition: 1s;
transition: 1s;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.team-member .picture .mask {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
border-radius: 50%;
width: 100%;
height: 100%;
}
.team-member .picture .mask .team-member-icons {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
display: table;
margin: 90px auto;
}
.team-member .picture .mask .team-member-icons a {
background-color: #a5a5a5;
border-radius: 50%;
display: block;
float: left;
height: 34px;
line-height: 32px;
margin: 0 5px;
width: 34px;
}
.team-member .picture .mask .team-member-icons a i {
color: #fff;
}

Make an image go dark and text appear when hovered over

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 */
}

After transition is complete, show the div

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.