iheartpagelines.com

9 Effects To Give Your Images An Upgrade.

Published by | 4 Comments

Greetings PL Enthusiasts,

For this post I will be sharing with you some of the effects that I use from time to time. These classes are intended to be used with the Platform 5 image section but  you free to modify them to work with anything.

Instructions:

To apply the effects just add the class to the image extra classes area in the advanced area.

Here are some examples:

 

 

 

Here is the list of classes:

  • zoom
  • zoom-twist
  • zoom-twist-rev
  • blur
  • greyscale
  • flash
  • sepia
  • zoom-out
  • opacity-e

**PLEASE NOTE THAT THESE ARE WRITTEN IN LESS  AND A LESS COMPILER IS REQUIRED - CUSTOM LESS FROM PAGELINES OR JETPACK CSS WILL WORK**

.zoom {
overflow: hidden;
img {
transition: all 0.3s;
}
img:hover {
transform: scale(1.1);

}
}

.zoom-twist {
overflow : hidden;
img {
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img:hover{
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
}
}

.zoom-twist-rev {
overflow : hidden;
img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img:hover{
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
}

.blur {
overflow : hidden;
img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img:hover {
-webkit-filter: blur(0);
filter: blur(0);
}
}

.greyscale {
overflow: hidden;
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
}

.sepia {
img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}
}

.opacity-e {
img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img:hover {
opacity: .5;
}
}

/* Flashing */
.flash {
img:hover {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}

.zoom-out {
overflow:hidden;
img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
}

I hope you find some value in this post and as always feel free to start a conversation below.

~Aires

About the author

Aires Dagraca, is the creative force behind Dagraca Creative, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids.

A special note from the author.

iHeart pagelines

4 Responses to "9 Effects To Give Your Images An Upgrade."

Leave a Reply

Your email address will not be published. Required fields are marked *


Let's build something great together.

iHeart PageLines

  • 7 Free sections
  • Tutorials and Tips
  • Great Support
  • Custom Sections
Join For Free !!!

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match