Make Your articles look better by exposing their main pictures.

This may come in handy:

This effect amazed Me to this day. It could be a good idea to apply it whenever You want to expose the main picture illustrating particular article. You may present this pic ordinary way - just as it is - but You may also make it looking more originally, aesthetically and a little bit surprisingly - simply by applying this little trick.

There is one more advantage to it: although while viewing the article it looks like Your main picture is placed on the very beginning of it - My script encourages You to put this picture on its very end first (while publishing). This way Your website becomes more SEO-friendly - because from the search engines point of view the very first thing they encounter while approaching Your site is... the actual content of Your article - not the image file (which obviously means less than the actual text). This way You eat Your cake and have it :) - Your articles look great with beautifully exposed pictures - while their content is optimized for search engines :) .

Here how it works:

1. It partially blurs and darkens the image.
2. It creates the smaller copy of this image - which won't be blurred (it will be presented in a normal way).
3. It places the smaller image on top of the bigger one.

Now Your main picture looks a little bit 3D-like, with some depth resembling so-called bokeh effect.

To have it working You need some jQuery alongside CSS code - the idea would be as follows:

The CSS code:

1. Let's center all the article's images.
2. Define a look for the bokeh-like background.
3. Define a look (actually it restores a normal look for the image) for the smaller ver. of the main illustration - which will be placed on top of that background.

The actual CSS code could look like this:

img

/* center all images in the article */

{
display: block;
margin: 0 auto;
}

.post-body img:first-child

/* blurred and darkened background */

{
opacity: 0.4;
-webkit-filter: blur(3px);
filter: blur(3px);
}

img.MainIllustrationSmaller

/* smaller version of Your main illustration - on top of that background */

{
opacity: 1!important;
-webkit-filter: blur(0px)!important;
filter: blur(0px)!important;
width: 500px;
position: relative;
top: -240px;
}

Note:
The smaller picture is made by downsizing the original one - in this case from 759px to 500px (so that the smaller picture is about 66% of the original one) - You can adjust those values to Your Own needs. In case You change those values probably You will be also in the need to adjust the positioning of the smaller picture in relation to the bigger one (in My case: "top: -240px;").

The jQuery code:

1. First let's create a space for the bigger version of Our main illustration - which will serve as a bokeh-like background.
2. Grab the actual picture (by wrapping it with a special box called "MainIllustration").
3. Place this pic into its place (on the beginning of the article).
4. Now let's do the same for the smaller version of the same picture - which will be displayed on top of the bigger one (the bokeh-like background). So....
5. ...let's create a space for it.
6. Grab the actual picture (by wrapping it with a special box called "MainIllustration2").
7. Place this pic into its place.
8. Remove the remaining clone of the picture (because it is no longer needed).

You may wonder how on earth the smaller picture (from step 4) has arisen out of the blue??? This is the point when the true magic happens ;) - in order to grab and reposition the image I use the jQuery command which actually doesn't change the position of an object per se - but it clones it - and then reposition the copy. So at this point as a result You have two images which - however - look differently, because of separate CSS definitions for each of them.

The actual code could look like that:

/* creating space for the main picture */

$(".post-body p:first").before( "<span></span>" );

/* wrapping the bigger picture */

$( ".post-body img:last" ).wrap( "<div id='MainIllustration'></div>" );

/* placing the bigger picture in its place (as a CSS-made bokeh-like background) */

$(".post-body span:first").html($("#MainIllustration").html());

/* ascribing a class to the smaller pic */

$("#MainIllustration img").addClass("MainIllustrationSmaller");

/* wrapping the smaller picture */

$( ".MainIllustrationSmaller" ).wrap( "<div id='MainIllustration2'></div>" );

/* creating space for the smaller picture */

$(".post-body span:first").after( "<div id='SmallerPic'></div>" );

/* placing the smaller picture on top of the bigger one */

$("#SmallerPic").html($("#MainIllustration2").html());

/* remove the clone */

$("#MainIllustration").remove();

With a little bit of touch-ups here and there it could look like this:

or like this (here I use a modified ver. of this concept: incorporating YouTube videos instead of smaller pictures):

If You'd like to play with this code - You can download this off-line working example to study and have a closer look - I hope it will be helpful :) .

Here You are - now Your articles gained some additional, non-verbal attribute speaking to the Guest of Your site before They begin reading. Or in other words, it looks better out-of-the-box :) - and You could treat it as another way to care about the Reader (how pleasant will be the time spent on Your site?).