How to Display Images and Text with Mosaic and Blur Effects Using spoiler.js

In this article, I’ll show you how to use spoiler.js to display images and text with mosaic and blur effects. This technique allows you to hide specific parts and reveal them when needed.

There are many instances where you need to hide certain information on a web page, such as articles containing spoiler information or temporarily hiding important content. spoiler.js is a handy tool to meet these needs. In this blog post, I’ll explain in detail how to use spoiler.js with specific CSS and JavaScript code.

CSS for Displaying Images and Text with Mosaic and Blur Effects

First, we set up the basic CSS. This CSS not only styles the entire page but also applies mosaic and blur effects using spoiler.js.

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0 10px 0;
}
h2{
	font-size:14px;
	font-weight:normal;
	line-height:1.2em;
	text-align:center;
	padding:0 0 15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
}

p{
	padding:20px;
	font-size:14px;
	text-align:center;
}
-->
</style>

JavaScript for Displaying Images and Text with Mosaic and Blur Effects Using spoiler.js

Next, load the necessary JavaScript files, jquery.min.js and spoiler.js, and write the code to apply mosaic and blur effects. By using spoiler.js, you can easily apply these effects. Set the area to be blurred using $(‘tag-element’).spoilerAlert({options}).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="spoiler.js"></script>
<script type="text/javascript">
$(function(){
	$('spoiler').spoilerAlert();	//Tag to add blur
	$('.spoiler').spoilerAlert({max: 20, partial: 6});	//Class name for tags to add blur
});
</script>

HTML for Displaying Images and Text with Mosaic and Blur Effects

In the HTML description, set the spoiler tag or class=”spoiler” to the elements where you want to apply the mosaic or blur effects. By using these tags or class names, spoiler.js automatically applies the effects.

<div id="idWrap">
	<h1>Display Images and Text with Mosaic or Blur Effects.</h1>
	<h2>The blur slightly reduces on mouseover, and the original text or image is displayed on click.</h2>
	<p><spoiler>How is it? Is the mosaic or blurred text displayed?</spoiler></p>
	<div align="center"><img src="logo1.jpg" alt="" class="spoiler"></div>
</div>

Demo Page for Displaying Images and Text with Mosaic and Blur Effects

If you want to see the functionality in action, please check the demo page via the following link.

Demo of Displaying Images and Text with Mosaic and Blur Effects

Source：SPOILER ALERT!

For more details on this technology, please refer to the official documentation of SPOILER ALERT! available at the following link.

Source：SPOILER ALERT!

Note that this plugin works on Chrome, Firefox, and Safari, but is not supported on IE.

Conclusion

In this article, we introduced how to use spoiler.js to apply mosaic and blur effects to images and text. This technique allows you to hide unnecessary information from viewers and reveal it when needed. Try it out and experience the effects.

I hope this blog post has shown you how easily you can achieve mosaic and blur effects using spoiler.js. Feel free to apply it to your projects.

　
Note: Please use at your own risk. Do not reuse the Google Analytics tags within the demo page tags.