Google Plus Like Hash Tag Style Effect

Let’s start by creating the Markup for the Hash Tags.

• Create a div with a class named post
• Inside the Post div, place a div with a class container
• Inside the container div create a tags div inside which all the Tags will be placed with a div of class tag

Markup Code

<div class="post">
    <div class="container">
 <div class="tags">
            <div class="tag">#Cooking</div><br/>
     <div class="tag">#Learning</div><br/>
     <div class="tag">#PHP</div>
 </div>
    </div>
</div>

CSS Styles

I have made the container div to be 200 by 200 pixels so that it has a nice square shape. I also have added some border styles to it.

The post class div is used as an relative positioning to the tags. By this way we can specify the area around which the tags should be places. The tags are place with a absolute positioning to the post class div.

A hovered class will be used when the mouse is hovered over the tag classed divs.

Style Code

.post {
    position: relative;
    z-index: 1;
    font-family: 
}

.container {
    padding: 5px;
    border: 1px solid lightgray;
    width: 200px;
    height: 200px;
    color: #427FED;
    background-color: #F7F7F7;
    border-color: white;
    border-style: solid;
    border-radius: 3px;
    border-width: 1px;
}

.tag {
    display: block;
    float: right;
    background-color: #D8D8FF;
    padding: 0 8px 0 8px;
    width: auto;
    position: absolute;
    max-width: 100px;
    text-align: center;
    margin: 3px -8px 3px -10px;
    color: grey;
}

.hovered {
    background-color: #427FED;
    color: white;
    box-shadow: 0 0 5px #D8D8D8;
}

Main Script

This script uses jQuery library. So in your project you should include the jQuery library or you can use any one of the CDN (Content Delivery Network) like Google CDN to get the script.

At first we initialize the required variable,

• tagsContainer – div with the container class containing the tags
• tags – The tag classed div
• firstTag – The first tags div

Every variable above is a jQuery variable. Then with these variable we bind the mouseenter and mouseleave event to modify the classes a little bit. We use the jQuery css and on methods to modify those div styles to achieve this effect.

JS Code

$(function() {
    // set the variables initally.
    var tagsContainer = $('.tags'),
            tags = tagsContainer.find('.tag'),
            firstTag = tagsContainer.find('.tag').first();

    function showFirst() {
        // Hide all the tags first
        tagsContainer.find('.tag').css('z-index', -1);

        // Show only the first tag
        firstTag.css('z-index', 0);
    }

    // Initially show only the first tag
    showFirst();

    // when the user hovers over the tag show all the tags.
    tags.on('mouseenter', function() {
        $(this).siblings('div').css('z-index', 0);
        $(this).toggleClass('hovered');
    });

    // toggle the style class when the user leaves the tag.
    tags.on('mouseleave', function() {
        $(this).toggleClass('hovered');
    });

    // When the cursor leaves the container, show only the first tag.
    tagsContainer.on('mouseleave', function() {
        showFirst();
    });
});

All the code is placed inside a anonymous function and passed into the jQuery function so that is executes when the document is ready and we can reduce the global variables this way.

Sample Screen

Screenshot Of G+ Like Hash Tag Style