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 *
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)
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)