Mask overlaying is a very powerful feature in CSS. In our example we will present the content of website (made from a screenshot) in a laptop with a nice smooth animation that will slowly reveal the content of the whole website. I have used this for a preview of our latest WordPress WooCommerce Theme, called Gothicus.
LIVE DEMO
You can check how the final product looks like on our live preview which presents two different demos of our WordPress Theme.
DOWNLOAD THE WHOLE PACKAGE
Download Masking images with CSS to present a website on a Laptop (46)
SETTING UP THE CLASSES IN HTML
First we need to properly set and nest classes in HTML file so they are as easy to work with as possible. Below is a snippet of the code for one column (out of two):
<a target = "_blank" href = "http://gothicus2.premiumcoding.com/demo.php">
<img src="placeholder.png" class="half-bottom" alt="">
<div class ="innerPlaceholder">
<div class ="innerImage"></div>
</div>
</a>
<br>
<a target = "_blank" href = "http://gothicus2.premiumcoding.com/demo.php" class="color-btn blue">Without AJAX dynamic opening</a>
</div>
Class one-half is an outer holder that contains all elements needed. The a href link with image will properly set and position the laptop (this is the image called placeholder.png). After we set those classes there should now be an empty laptop. To get some action rolling on it, we need to set two nested classes like this:
Class innerPlaceholder will define a black square that is an actual size of the screen where our image will appear later. We will later define in CSS an absolute position, set the color and position it exactly on the laptop. This is also the class where we will set overflow:hidden so our website screenshot doesn’t extend over the dimensions of this class.
Class innerImage is the class that will have our website screenshot as background set in the CSS and on hover the image will move upwards, thus revealing the content of the whole website.
SETTING UP THE CSS
In CSS we need to define the exact position of all placeholders and website screenshot to make this work in pixel perfect details. Class one-half column simply defines the position of all elements on the screen. We make it happen by adding this line of CSS:
All the “magic” happens in the next 3 lines that we need to add for each outer class (if we have more):
.innerImage {cursor:pointer;width:288px;height:576px;position:absolute;background:#1A1A1A url(bigScreen.jpg) no-repeat;overflow:hidden;}
.innerImage:hover {margin:-400px 0 0 0px}
As told before, the class .innerPlaceholder will create a black screen over the laptop (like if the laptop would be turned off). You can play with position a bit, if you want to move the screen a bit. The key for this animation to work like we want is in adding the overflow:hidden; to class .innerPlaceholder. If we do not add this, the website screenshot would just be placed in it’s whole size over the laptop. Class .innerImage has our website screenshot as a background position perfectly at the top of the laptop screen. On hover we move the website screen upwards to show the content of lower part of the screen also.
There is no animation yet and the move of the screen is instant making it not pleasing to the eye. We just need to add some CSS3 magic to it, and turn it into a smooth animation. We need to add this code at the bottom of style.css:
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
This is the last step in our example and it now looks exactly like our demo for Gothicus WordPress Theme. I hope you enjoyed reading our latest CSS3 Trick.
