 My CSS Effects
Hi, my name is Elshan Nasirov! I am a programmer and web developer for about 20 years.You can order any scripts of any effects you are interested in here. I will contact you within 24 hours and try to help you. Below I present some of my developments that may be useful to you.
1. Effect Grow
Effect Grow | CSS Code
/*GROW*/
.grow img {
height: 200px;
width: 200px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.grow img:hover {
width: 400px;
height: 400px;
}
Effect Grow | HTML Code
Effect Grow | Result
2. Effect Shrink
Effect Shrink | CSS Code
/*SHRINK*/
.shrink img {
height: 400px;
width: 400px;-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.shrink img:hover {
width: 300px;
height: 300px;
}
Effect Shrink | HTML Code
Effect Shrink | Result
3. Effect Sidepan
Effect Sidepan | CSS Code
/*SIDEPAN*/
.sidepan img {
margin-left: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}.sidepan img:hover {
margin-left: -200px;
}
Effect Sidepan | HTML Code
Effect Sidepan | Result
4. Effect Vertpan
Effect Vertpan | CSS Code
/*VERTPAN*/
.vertpan img {
margin-top: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}.vertpan img:hover {
margin-top: -200px;
}
Effect Vertpan | HTML Code
Effect Vertpan | Result
5. Effect Tilt
Effect Tilt | CSS Code
/*TILT*/
.tilt {
-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;
}.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
Effect Tilt | HTML Code
Effect Tilt | Result
6. Effect Morph
Effect Morph | CSS Code
/*MORPH*/
.morph 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;
}.morph img:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Effect Morph | HTML Code
Effect Morph | Result
7. Effect Focus
Effect Focus | CSS Code
/*FOCUS*/
.focus img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.focus img:hover {
border: 70px solid #000;
border-radius: 50%;
}
Effect Focus | HTML Code
Effect Focus | Result
8. Effect Blur
Effect Blur | CSS Code
/*BLUR*/
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.blur img:hover {
-webkit-filter: blur(5px);
}
Effect Blur | HTML Code
Effect Blur | Result
9. Effect Black & White
Effect Black & White | CSS Code
/*B&W*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.bw:hover {
-webkit-filter: grayscale(100%);
}
Effect Black & White | HTML Code
Effect Black & White | Result
10. Effect Brighten
Effect Brighten | CSS Code
/*DARKEN*/
.brighten img {
-webkit-filter: brightness(0%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.brighten img:hover {
-webkit-filter: brightness(100%);
}
Effect Brighten | HTML Code
Effect Brighten | Result
11. Effect Sepia
Effect Sepia | CSS Code
/*SEPIA*/
.sepia img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.sepia img:hover {
-webkit-filter: sepia(100%);
}
Effect Sepia | HTML Code
Effect Sepia | Result
12. Effect Contrast
Effect Contrast | CSS Code
/*CONTRAST*/
.contrast img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.contrast img:hover {
-webkit-filter: contrast(185%);
}
Effect Contrast | HTML Code
Effect Contrast | Result
13. Effect Hue-Rotate
Effect Hue-Rotate | CSS Code
/*HUE_ROTATE*/
.hue-rotate img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.hue-rotate img:hover {
-webkit-filter: hue-rotate(65deg);
}
Effect Hue-Rotate | HTML Code
Effect Hue-Rotate | Result
14. Effect Invert
Effect Invert | CSS Code
/*INVERT*/
.invert img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.invert img:hover {
-webkit-filter: invert(100%);
}
Effect Invert | HTML Code
Effect Invert | Result
15. Effect Opacity
Effect Opacity | CSS Code
/*OPACITY*/
.opacity img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.opacity img:hover {
-webkit-filter: opacity(25%);
}
Effect Opacity | HTML Code
Effect Opacity | Result
16. Effect Shine
Effect Shine | CSS Code
figure {
width: 500px;
height: 358px;
margin: 0;
padding: 0;
overflow: hidden;
}
figure:hover+span {
opacity: 1;
}
.hover figure {
position: relative;
}
.hover figure::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.hover figure:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
@keyframes shine {
100% {
left: 125%;
}
}
Effect Shine | HTML Code
Effect Shine | Result
|
PRESS.AZ
Elshan Nuraddin Nasirov