MyBB Community Forums

Full Version: Zoom effect mycode for images
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
An image with fade out & shadow effect with mouse over zoom action is more better in Mybb sites.
First of all , see Demo
If you want it must make mycode same below :
=============
Title *
Zoom effect for images
=============
Short Description
Zoom effect for images
=============
Regular Expression *
\[zoom\](.*?)\[/zoom\]
=============
Replacement *
<style>
.zoom {
    opacity: 0.5;
    -webkit-transition: opacity .5s ease-in-out,
    -webkit-transform .5s ease-in-out,
    background-color 1s ease-in-out;
    -moz-transition: opacity .5s ease-in-out,
    -moz-transform .5s ease-in-out,
    background-color 1s ease-in-out;
    -o-transition: opacity .5s ease-in-out,
    -o-transform .5s ease-in-out,
    background-color 1s ease-in-out;
    transition: opacity .5s ease-in-out,
    transform .5s ease-in-out,
    background-color 1s ease-in-out;
    height:200px;
    width:200px;
}
.zoom:hover {
    opacity: 1;
    -webkit-transform: scale(2.0);
    -moz-transform: scale(2.0);
    -o-transform: scale(2.0);
    transform: scale(2.0);
   background-color: #881100;
}
.pic {
  height: 150px;
  width: 150px;
  overflow: hidden;
  margin:0 auto;
  border: 5px solid white;
  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
}
.pic:hover {
  cursor: pointer;
}
</style>
 <div class ="zoom pic"><img src="$1" height="150px" width="150px" alt="zoom"></div>
Thats it!!!!!
Now if you enter
[zoom]http://your image address[/zoom] in editor you have an image with border and 3 effects shadow,fade out and zoom .(you can change numbers for your best results)
its a nice one, xD, i use one plugin to all images, but this one can works for some purposes and sees good xD
An image with fade out & shadow effect with mouse over zoom action is more better in Mybb sites.

Online Casino Australia
not working , i wonder if it could work ?