How to Create a Moving or Shacking Image Effect on a Blog - After a week of vacuum writing on a blog, I'm finally back and will provide a little information about a tutorial on how to create a moving or swaying image effect on a blog.
Well, in the template used, you must have seen the effect of an image that always moves or sways when the cursor is hovered over the image, right?
Apart from being a modernization of blog features from time to time, this effect has now been widely used by bloggers in the country (perhaps also abroad) as a method used to attract the interest of readers.
To use this effect, at least a CSS script is needed which will later be placed in the HTML template section. After that, you just need to call the script so that it can be used according to its function.
How to Create a Moving or Swaying Image Effect on a Blog
Since I use the Blogger platform for writing, this tutorial will follow the flow based on the Blogger system itself. For those of you who are WordPress users, please follow this tutorial while still referring to the steps below:
Login to BLOGGER
Select the THEME menu
Select EDIT HTML
Paste above
]]></b:skin>Select SAVE
Done.
.post-body img {display:inherit;transform-origin:center center} img:hover img {animation-play-state:running} @keyframes img { 20% {transform: translate(-1px, -5px) rotate(2.5deg)} 40% {transform: translate(5px, 1px) rotate(-2.5deg)} 60% {transform: translate(-1px, -5px) rotate(2.5deg)} 80% {transform: translate(5px, 1px) rotate(-2.5deg)} 0%, 100% {transform: translate(0, 0) rotate(0)} } img:hover {animation-name:img;animation-duration:0.5s;animation-timing-function:ease-in-out}
The CSS script above can be used directly without having to call the script first. So, you no longer bother editing every image that will be given a moving effect.
If you only want to give a moving effect to certain images, please replace the script above with the following script:
.trickpk {display:inherit;transform-origin:center center} .trickpk:hover .trickpk {animation-play-state:running} @keyframes .trickpk { 20% {transform: translate(-1px, -5px) rotate(2.5deg)} 40% {transform: translate(5px, 1px) rotate(-2.5deg)} 60% {transform: translate(-1px, -5px) rotate(2.5deg)} 80% {transform: translate(5px, 1px) rotate(-2.5deg)} 0%, 100% {transform: translate(0, 0) rotate(0)} } .trickpk:hover {animation-name:img;animation-duration:0.5s;animation-timing-function:ease-in-out}
class="trickpk" attribute in each image's HTML. For example:<img class="trickpk" alt="#" data-original-height="#" data-original-width="#" src="#" title="#" />
To change the movement speed, change the value of the animation-duration code: 0.5s;
Choose one of the scripts above according to your needs based on the type of function. Do not use at the same time to avoid clashing.
Closing
As a blogger, it is fitting to provide the best written content to all readers. The best type of display can be like writing that is complete and in-depth, easy to understand, and attractive images.
Remember, images are one of the most interesting components for readers. Therefore, use an image that is indeed the best according to the topic being discussed.