I create a shape in CSS
.a {
transform: scale(1);
border-radius:100%;
width:100px;
height:100px;
background-color:#444;
transition: all .5s;
}
On hover I'm going to increase the scale over .5s.
.a:hover {
transform: scale(1.2);
}
How can I set a delay and return back to the original scale?
Thanks
Is this the kind of effect you're looking for? You can use the delay property for the translation rule.
.a {
border-radius: 100%;
color: #333;
font-weight: bold;
font-size: 1.5em;
padding: 2em;
width: 100px;
height: 100px;
background-color: #e3e3e3;
transform: scale(1);
transition: all .5s 2s;
}
.a:hover {
transform: scale(1.2);
transition: all .5s 0s;
}
<p class="a">Hello World.</p>
There is a tutorial for transition:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
And Try ıt:
transition: all 0.5s ease-out;
Related
I don't get this, it seems like a bug, but it's consistent through several browsers. So the bug must be in my own head.
Basically, I've got this block with an image and some text.
The heading inside this block is composed of several span elements with each character in them. I want to fade these in, with opacity 0 to 1 and move them about 30 pixels on hover, with a slight delay on each span. This is no problem. But for some reason, only opacity seems to work, not translate3d.
I've got a jsfiddle to describe it:
https://jsfiddle.net/w5Lgdgt9/5/
HTML:
<div class="tiles-wrapper">
<article class="tiles-block">
<a href="">
<img src="https://orig06.deviantart.net/91ee/f/2008/209/1/9/cat_stock_002_by_pc_stock.jpg">
<h3>
<span>L</span>
<span>o</span>
<span>r</span>
<span>e</span>
<span>m</span>
<span></span>
<span>i</span>
<span>p</span>
<span>s</span>
</h3>
</a>
</article>
</div>
CSS:
.tiles-wrapper {
position: relative;
overflow: hidden;
}
.tiles-block {
width:100%;
}
img {
width: 100%;
transition: transform .9s ease;
transform: scale(1);
}
span {
position: relative;
transition: opacity .3s, transform .3s ease;
opacity: 0;
transform: translate3d(0,-30px,0);
color:#000;
font-weight: bold;
}
h3 {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
text-align: center;
z-index: 1;
transition: opacity .3s ease, transform .3s ease;
opacity: 0;
transform: translate3d(0,40px,0);
padding: 70px;
font-size: 24px;
}
a {
display:block;
margin: 0;
position: relative;
}
h3 span:nth-of-type(1) {
transition-delay: .2s;
}
h3 span:nth-of-type(2) {
transition-delay: .4s;
}
h3 span:nth-of-type(3) {
transition-delay: .6s;
}
h3 span:nth-of-type(4) {
transition-delay: .8s;
}
h3 span:nth-of-type(5) {
transition-delay: 1s;
}
h3 span:nth-of-type(6) {
transition-delay: 1.2s;
}
h3 span:nth-of-type(7) {
transition-delay: 1.4s;
}
h3 span:nth-of-type(8) {
transition-delay: 1.6s;
}
h3 span:nth-of-type(9) {
transition-delay: 1.8s;
}
h3 span:nth-of-type(9) {
transition-delay: 2s;
}
a:hover span{
opacity: 1;
transform: translate3d(0,0,0);
}
a:hover h3 {
opacity: 1; transform: translate3d(0,0,0);
}
a:hover img{ transform: scale(1.1); }
Sorry about the horrible CSS code, I usually use SASS and I couldn't get it to work on jsfiddle. Also, don't worry about the prefixes on the transition stuff, gulp takes care of that for me, so that's not the problem.
Found out, it's because the span elements hadn't been set to inline-block. As translate and translate3d only works on block elements. Stupid me
Use:
translate
instead of:
translate3d
Your fiddle updated with this minor change works just fine: https://jsfiddle.net/w5Lgdgt9/6/
How to create a reveal icon inside button on hover in TB3. I tried to mimic this behavior using CSS transitions and position property. But I essentially need is to have a separate background color for icon and button. Here is what I am doing right now.
HTML Markup
<button class="btn btn-dark icon-revealed">
<span class="glyphicon glyphicon-cloud-download"></span>
Download
</button>
CSS Code
.btn.icon-revealed > span {
left: -30px;
width: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.btn.icon-revealed:hover > span {
width: 20%;
-webkit-transform: translate(2em,0);
-moz-transform: translate(2em,0);
-o-transform: translate(2em,0);
-ms-transform: translate(2em,0);
}
What I want to Achieve
Notice the background color of icon and button changed on hover state. I could not able to do that. How can I achieve this in TB3?
Here's an alternative way that smooths out the transition.
.btn-dark {
border: none;
font-family: inherit;
font-size: inherit;
color: #fff;
background: none;
padding: 15px 30px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-dark:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-icon {
background: #4E7878;
color: #fff;
line-height: 20px;
font-size: 14px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-icon span {
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-icon:before {
background: #4A6B6B;
position: absolute;
height: 100%;
width: 30%;
line-height: 2.5;
font-size: 150%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-download:hover span {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
color: #fff;
}
.btn-download:before {
left: -100%;
top: 0;
}
.btn-download:hover:before {
left: 0%;
}
.icon-reveal:before {
content: "\e197";
font-family: 'Glyphicons Halflings';
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<button class="btn-dark btn-icon btn-download icon-reveal"><span> Download</span>
</button>
</div>
You can create that effect using multiple backgrounds with linear-gradient. Code explanantion in comments
.btn.icon-revealed {
margin: 10px; /* Added for SO snippet, not required */
width: 115px; /* Added fixed width for avoiding jump */
}
.btn.icon-revealed > span {
left: -40px;
width: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.btn.icon-revealed:hover > span {
width: 20%;
-webkit-transform: translate(2.5em, 0);
-moz-transform: translate(2.5em, 0);
-o-transform: translate(2.5em, 0);
-ms-transform: translate(2.5em, 0);
}
/* Added code */
.btn.icon-revealed {
background: #53777A;
color: #fff;
}
.btn.icon-revealed:hover {
background: linear-gradient(to right, #4B6B6E 0%, #4B6B6E 30%, #53777A 30%);
/* Start color---^, End at 30%-^, ^-- Start second color */
color: #fff;
}
.btn.icon-revealed:hover .text {
padding-left: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-dark icon-revealed">
<span class="glyphicon glyphicon-cloud-download"></span>
<span class="text">Download</span>
</button>
So i'm trying to create a portfolio with an hover with text.
I tried to make it a little responsive with bootstrap, but I can't get it right how the image is centered in the div when you scaling down.
I really wanna get something like this ( https://www.weblounge.be/en/ )
With an high of 100% and a width of 100% to always show the full size of the image when resizing.
I guess I do something wrong but can't find the issue.
my buildup is
<div class="col-lg-4 col-sm-6 nopad">
<div class="box">
<img src="http://i.imgur.com/DuUtNax.jpg">
<div class="overlay">
<h5>Random website</h5>
<p class="text">Random text</p>
</div>
</div>
</div>
and the css
.container {
background-color: #fff;
padding: 100px 0px 100px 0px;
.nopad {
padding-left: 0px;
padding-right: 0px;
}
.box {
cursor: pointer;
height: 400px;
position: relative;
overflow: hidden;
width: 100%;
text-align: left;
img {
position: absolute;
width: 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;
}
.overlay {
background: rgba(0, 0, 0, 0.7);
position: absolute;
left: 0;
z-index: 100;
opacity: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
padding-top: 20%;
-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;
h5 {
color:#fff;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
transform: translateY(60px);
-webkit-transform: translateY(60px);
}
p {
color: #fff;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
transform: translateY(60x);
-webkit-transform: translateY(60px);
}
.button-white {
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
transform: translateY(60px);
-webkit-transform: translateY(60px);
margin: 0px;
}
}
&:hover img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
&:hover .overlay {
opacity: 1;
h5 {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
p {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
}
}
}
My codepen to show what is wrong: http://codepen.io/denniswegereef/pen/MwJXde
You need to use the product images as a background-image in a product div:
<div class="box">
<div class="product-image" style="background-image: url(http://i.imgur.com/DuUtNax.jpg)"></div>
...
</div>
and then change your css from .box img, to .box .product-image:
.box {
.product-image {
position: absolute;
width: 100%;
height:100%;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
background-repeat: no-repeat;
background-size: cover;
}
&:hover .product-image {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
http://jsfiddle.net/8pfjdmb4/
I have this piece of code:
<style>
.zoomimg img{
margin-top:2px;
margin-bottom:2px;
margin-right: 70px;
margin-left: 4px;
height:180px;
width:520px;
-moz-transition:-moz-transform 0.3s ease-in;
-webkit-transition:-webkit-transform 0.3s ease-in;
-o-transition:-o-transform 0.3s ease-in;
}
.zoomimg img:hover{
opacity: 0.8;
filter: alpha(opacity=40);
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
}
</style>
now what it does is great. but... when it enlarges , it enlarges the most right column and the picture in it.
resulting, the website gets wider...
but i don't want that.
how can i code it so the hover enlarge moves to the left. respectively and it doesn't enlarge the current browser page?
#container {
border: 2px solid red;
}
.zoomimg img {
margin-top: 2px;
margin-bottom: 2px;
margin-right: 70px;
margin-left: 4px;
height: 180px;
width: 520px;
overflow: hidden;
border: 2px solid black;
-moz-transition: -moz-transform 0.3s ease-in;
-webkit-transition: -webkit-transform 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.zoomimg img:hover {
opacity: 0.8;
filter: alpha(opacity=40);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
<div id="container">
<div class="zoomimg">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" />
</div>
</div>
Please, how can I get an effect like the one in the upper right menu, with just CSS3? (mouse over -> circle shrinks and fades in, mouse out -> circle expands and fades out)
http://wpkuzen.com/html/architex/
I tried to look at the code and it's messy, nand couldn' find a tutorial that explain this...
Thanks in advance!
Take a look at this article and demo. They have very similar transitions/animations to the one which you need.
Here's an example:
FIDDLE
Markup:
CSS
.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: green;
box-shadow: 0 0 0 4px #FFF;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hi-icon:before {
content: "X"; /* place image here */
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon:hover:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
.hi-icon:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
left: -2px;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2px;
z-index: -1;
background: #FFF;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}
This effect is done by using the CSS transition. You have one property and instead of change that property instantly (on hover or fadeout) you change that property over time.
Here you have a nice link helping you to hopefully achive your goals. :)
link to transition
I really don't understand your comment "I tried to look at the code and it's messy".
You have a fully indented CSS with comments !
directly copy-pasted from your link:
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
border-radius: 50%;
font-size: 2.2em;
box-shadow: 0 0 0 30px transparent;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
width:1.1em !important;
}
/* Animate the box-shadow to create the effect */
.navbar .nav a:hover i,
.navbar .nav a:active i,
.navbar .nav a:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}