Making navigation on CSS3 with preview

Today we look at the option to create a beautiful effect when you hover the mouse on the cyclical element of the navigation. We realize it using CSS3 transitions.

So, our task is to create a cyclical navigation carousel, adding round buttons with arrows and grows when you rest the mouse in the same round preview of the next page. In this example, it will preview the previous and subsequent images.

In the demo example, we used photographs of Andrei Yakovlev


HTML

Our navigation will be as follows:

<div class="cn-nav">
    <a href="#" class="cn-nav-prev">
        <span>Previous</span>
        <div style="background-image:url(../images/thumbs/1.jpg);"></div>
    </a>
    <a href="#" class="cn-nav-next">
        <span>Next</span>
        <div style="background-image:url(../images/thumbs/3.jpg);"></div>
    </a>
</div>

In the demo example works template jQuery, which dynamically adds previews for the previous and subsequent pictures demo tape. But here and now we look at only the time of the effect of widening the circle.

CSS

Let's look at how we add styles to create a navigation bar.
On the basis of what will be surrounded by navigational elements, we define the absolute position of the latter. The height and width, we will be 70px, neither more nor less, and just right for a nice hover-effect.

.cn-nav > a{
    position: absolute;
    top: 0px;
    height: 70px;
    width: 70px;
}
a.cn-nav-prev{
    left: 0px;
}
a.cn-nav-next{
    right: 0px;
}

Images of arrows we put the background in the span-element to the original height and width of 46px.So he bought a round shape, set the radius of the border equal to half its size. Next, using a negative 50% margin, we put it in the center of reference. And then assign an animated transition, changing the required properties for 400ms, with a default value of ease. 

.cn-nav a span{
    width: 46px;
    height: 46px;
    display: block;
    text-indent: -9000px;
    -moz-border-radius: 23px;
    -webkit-border-radius: 23px;
    border-radius: 23px;
    cursor: pointer;
    opacity: 0.9;
    position: absolute;
    top: 50%;
    left: 50%;
    background-size: 17px 25px;
    margin: -23px 0 0 -23px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

Background span-element (left and right arrows):

.cn-nav a.cn-nav-prev span{
    background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a.cn-nav-next span{
    background: #666 url(../images/next.png) no-repeat center center;
}

Now about the element div, which contains our preview. Initially, it has zero size in height and width. His position, too, and absolutely positioned at the center of reference. The width of the border and padding are also initially zero. The background image will fill the item to the end, so we set the background of 100% of the width and height. An animated transition of this element will be for all of its properties within 200ms, slowing down as far as performance.

.cn-nav a div{
    width: 0px;
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

Now we define the type of objects when you hover the mouse on them.

Our span, we will increase to 100px in width and height, and on this basis, we need to set a new half-radius of the new size and negative margins. A little background will increase the size, and will edit the color and transparency.

.cn-nav a:hover span{
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    opacity: 0.6;
    margin: -50px 0 0 -50px;
    background-size: 22px 32px;
    background-color:#a8872d;
}

Finally, we preview the div with increased only 90px, so that it will peek out from under the span, forming a frame around the image. Similarly, we increase the size of the background and set a negative padding and border radius of half the size of the element:

.cn-nav a:hover div{
    width: 90px;
    height: 90px;
    background-size: 120% 120%;
    margin: -45px 0 0 -45px;
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    border-radius: 45px;
}

That's all, actually. The effect of running on pure CSS3. Look in the demo from Mary Lou with tympanus.net and see what it looks like a navigation being built in the round-robin navigation. Do not forget that you need to use the latest version of the browser - all for today.

We hope this information is useful to you in your work.