Jump to content
Sign in to follow this  
OKQL

Display Images with Shape Masking and Nifty Zoom Effect

Recommended Posts

14450.jpg

Today we are going to show you how to mask images with shapes plus some nifty zoom animation effects with just HTML & CSS. I have seen this kind of styling and effect in many portfolio websites and let me show you how it's made.

Personally, I don't think we should withhold ourself from using new technology or technique such as CSS3 on web projects because of old browsers don't support them. I believe we should "reward" users with modern browser by giving them a better user experiences. Therefore, I enjoy using CSS3 in my projects, but of course, we have to make sure it can degrades gracefully or at least display well in old browsers.

This tutorial will be using CSS3 transform which means, old browsers will not show the zooming effect. Good news is, I have coded it, even if it's old browsers, it will still look pretty good and usable. If you want something hardcore, you can check out my previous tutorial - Create Beautiful Hexagon Shape With Pure CSS3.

shape_insp_205034.jpg

Here are some of the websites that are using the similar way in theirs portfolio page:

shape_insp_211439.jpg

IMAGES

We want this example to be usable in most browsers, therefore, we're not going to draw the shape using CSS3 or whatever fancy techniques. We stick to the ancient way - transparent PNG. This is how each of the shape looks like:

shape_png_205222.png

HTML

To make it easy to understand, I have made an image to illustrate what each layer does.

shape_layers_211531.gif

    <div class="shape">
<a href="{URL}" class="overlay {round|hexagon|pentagon}"></a>
<div class="details">
<span class="heading">{TITLE}</span>
<hr />
<p>{DESCRIPTION}</p>
<a href="{URL}" class="button">VIEW</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="{IMAGE URL}" alt="" />
</div>
</div>

In case you need the fonts I used in this tutorial, here is it:

    <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>

CSS

We don't have Javascript in this tutorial. We use :hover pseudo code and also CSS animation to do simple mouseover and zooming effects.

Here is the portion of code that does all these animation effects:

    ......

.shape .overlay {

display:block;

width: 310px;

height: 310px;

position: absolute;

top:-5px;

left:-5px;

-webkit-transform: scale(1,1);

-webkit-transition-timing-function: ease-out;

-webkit-transition-duration: 0.6s;

-moz-transform: scale(1,1);

-moz-transition-timing-function: ease-out;

-moz-transition-duration: 0.6s;

transform: scale(1,1);

transition-timing-function: ease-out;

transition-duration: 0.6s;

z-index:500;

/* allow user to actually perform actions underneath this layer */

pointer-events:none;

background-repeat: no-repeat;

}

......

/* hover effect */

.shape:hover .overlay {

-webkit-transform: scale(1.07,1.07);

-webkit-transition-timing-function: ease-out;

-webkit-transition-duration: 0.3s;

-moz-transform: scale(1.07,1.07);

-moz-transition-timing-function: ease-out;

-moz-transition-duration: 0.3s;

}

.shape:hover .bg {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

filter: alpha(opacity=80);

-moz-opacity: 0.8;

-khtml-opacity: 0.8;

opacity: 0.8;

display:block;

}

.shape:hover .details {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

-moz-opacity: 1;

-khtml-opacity: 1;

opacity: 1;

z-index:450;

display:block;

}

......

Here is the full CSS:

    .shape {

width: 300px;

height: 300px;

position: relative;

}

.shape .overlay {

display:block;

width: 310px;

height: 310px;

position: absolute;

top:-5px;

left:-5px;

-webkit-transform: scale(1,1);

-webkit-transition-timing-function: ease-out;

-webkit-transition-duration: 0.6s;

-moz-transform: scale(1,1);

-moz-transition-timing-function: ease-out;

-moz-transition-duration: 0.6s;

transform: scale(1,1);

transition-timing-function: ease-out;

transition-duration: 0.6s;

z-index:500;

/* allow user to actually perform actions underneath this layer */

pointer-events:none;

background-repeat: no-repeat;

}

/* different shapes */

.shape .overlay.round {

background: url(round.png);

}

.shape .overlay.hexagon {

background: url(hexagon.png);

}

.shape .overlay.pentagon {

background: url(pentagon.png);

}

/* hover effect */

.shape:hover .overlay {

-webkit-transform: scale(1.07,1.07);

-webkit-transition-timing-function: ease-out;

-webkit-transition-duration: 0.3s;

-moz-transform: scale(1.07,1.07);

-moz-transition-timing-function: ease-out;

-moz-transition-duration: 0.3s;

}

.shape:hover .bg {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

filter: alpha(opacity=80);

-moz-opacity: 0.8;

-khtml-opacity: 0.8;

opacity: 0.8;

display:block;

}

.shape:hover .details {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

-moz-opacity: 1;

-khtml-opacity: 1;

opacity: 1;

z-index:450;

display:block;

}

/* content styles */

.shape .bg,

.shape .details {

position: absolute;

width: 300px;

height:300px;

display:table-cell;

vertical-align:middle;

text-align:center;

top:0;

left:0;

opacity:0;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

transition: all 0.3s ease;

display:none;

}

.shape .bg {

background: #4b5a78;

}

.shape .details span.heading {

font-family: 'Roboto Condensed', serif;

font-size:30px;

display:block;

margin-top:70px;

color:#fff;

text-decoration:none;

}

.shape .details p {

font-family: 'Abel', sans-serif;

color:#fff;

width: 70%;

font-size:14px;

margin:0 auto;

}

.shape a.button {

padding:5px 15px;

font-family: 'Abel', sans-serif;

font-size:12px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

-ms-border-radius: 20px;

-o-border-radius: 20px;

border-radius: 20px;

background: #2f3644;

text-decoration:none;

color:#fff;

display:block;

width:50px;

margin:0 auto;

text-align:center;

margin-top:15px;

}

.shape a.button:hover {

background: #fff;

color: #2f3644;

}

Conclusion

That's it, pretty simple to make and look elegant too. You can change the shape to whatever you want. This tutorial is tested on IE8 and should work in most modern browsers. If you have any questions, drop a comment.

Demo | Download

Source

Author: Kevin Liew

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...