PRESS.AZ Click to Call +994 50 358 03 36


WEB Studio     My Templates     My Scripts     Photo Gallery     Video Gallery     Softwares     Aphorisms



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






website counter

Besucherzahler
счетчик посещений
contador de visitas счетчик посещений


WEB Editor & WEB Master      Elshan Nuraddin Nasirov

Global Network Technologies

© 2000 - 2020