1<style>
2div {
3 background-color: blue;
4 padding: 40px;
5 color: white;
6 cursor: pointer;
7 -webkit-transition: all 0.5s 0s ease;
8 -moz-transition: all 0.5s 0s ease;
9 -o-transition: all 0.5s 0s ease;
10 transition: all 0.5s 0s ease;
11}
12/*transition: property duration timing-function delay|initial|inherit;*/
13
14.hidden {
15 visibility: visible;
16 opacity: 0.1;
17 max-width: 12%;
18}
19
20.hidden:hover {
21 visibility: visible;
22 opacity: 1;
23 max-width: 100%;
24}
25</style>
26
27<div class="hidden">HOVER ME!</div>
1img {
2 height: 400px;
3 width: 400px;
4
5 transition: height 0.5s linear, width 0.5s linear;
6}
1/*
2To create a transition effect, you must specify three things:
3 transition: (transition-property) (transition-duration) (transition-delay) (transition-timing-function)
4 transition: all 0.5s ease-out
5
6transition-property:
7 Specifies the name of the CSS property the transition effect is for, by default it's none
8 the property could be: width, height, background-color, color, font-size, opacity etc, by applying "all" keyword, it applies on all properties
9 transition-property: background-color; --> aply on background only
10 transition-property: all; --> apply on all
11
12transition-duration:
13 Specifies how many seconds or milliseconds a transition effect takes to complete
14
15transition-delay:
16 Specifies a delay (in seconds) for the transition effect
17
18transition-timing-function property
19 ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
20 ease-in - specifies a transition effect with a slow start
21 ease-out - specifies a transition effect with a slow end
22 ease-in-out - specifies a transition effect with a slow start and end
23*/
24
25/* transition scale example*/
26.trans_scale {
27 transition-delay: 0s;
28 transition-property: box-shadow, background-color, transform;
29 transition-duration: 0.3s;
30 transition-timing-function: ease-out;
31 /* OR */
32 /* transition: all 0.3s 0s ease-out; */
33 /* transition: 0.3s;
34 /* transition: transform 0.5s; */
35}
36
37.trans_scale:hover {
38 transform: scale(1.02, 1.03);
39 box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
40 background-color: #f2efe3ff;
41}